Gulp快速入门教程

2018年4月21日13:48:42 4 42

Gulp是基于流的前端自动化的构建工具,虽说如今是webpack盛行的时代,但是gulp和webpack整合效果更美味的,鱼与熊掌都可兼得哦!本文只介绍下Gulp的基本使用和一些常用的Gulp插件,废话不多说,一起来看看吧。

Gulp快速入门教程

安装Gulp

Gulp是依赖Node的,这里假设你已经安装好了Node,首先我们全局安装一下Gulp:

npm install -g gulp

全局安装完成后,我们再切换到项目的要目录下,执行:

//- 生成一个 package.json,里面是一些常规的配置信息
npm init

//- 局部安装 Gulp,并生成包依赖信息于 package.json 内的 devDependencies
npm install gulp --save-dev

安装Gulp插件

Gulp的任务都是以插件的形式存在的,所以在使用前,需要先安装我们用到的插件到项目目录内,插件的安装命令:

// 多个插件可以用空格分隔
npm install 插件名 --save-dev

Gulp常用插件

  • gulp-rename:重命名文件
  • gulp-concat:合并文件
  • gulp-filter:过滤文件
  • gulp-uglify:压缩Js
  • gulp-csso:压缩优化CSS
  • gulp-html-minify:压缩HTML
  • gulp-imagemin:压缩图片
  • gulp-zip:zip压缩文件
  • gulp-autoprefixer:自动为css添加浏览器前缀
  • gulp-rev:给静态资源文件名添加hash值 unicorn.css => unicorn-d41d8cd98f.css
  • gulp-sass:编译sass
  • gulp-babel:将ES6代码编译成ES5

配置Gulp

我们需要在根目录下创建一个gulpfile.js文件来配置Gulp,将所有的插件加载进来,文件名必须要是gulpfile.js,否则无论执行,下面是一个gulpfile的示例:

var gulp    = require('gulp');
var gutil   = require('gulp-util');
var uglify  = require('gulp-uglify');
var concat  = require('gulp-concat');

// 通过 require() 载入我们需要用到的插件~ 

gulp.task('concat', function () {
    gulp.src('./scripts/*.js')
        .pipe(uglify())
        .pipe(concat('jkd.min.js'))
        .pipe(gulp.dest('./build/js'));
});

gulp.task('default', ['concat']);

运行Gulp

配置好gulpfile.js文件后,我们就可以运行Gulp进行相关的任务了,使用Gulp命令操作:

// 运行默认的 default task
gulp

// 仅运行 concat 这一个 task
gulp concat

// 运行结果如下:
D:\SVN\wap\m>gulp
[12:03:13] Using gulpfile D:\SVN\wap\m\gulpfile.js
[12:03:13] Starting 'concat'...
[12:03:13] Finished 'concat' after 9.1 ms
[12:03:13] Starting 'default'...
[12:03:13] Finished 'default' after 11 μs

D:\SVN\wap\m>gulp concat
[12:03:25] Using gulpfile D:\SVN\wap\m\gulpfile.js
[12:03:25] Starting 'concat'...
[12:03:25] Finished 'concat' after 9.54 ms

Gulp API

// 定义一个 task,声明它的名称, 任务依赖, 和任务内容.
gulp.task(name[, deps], fn)

// 读取文件,参数为文件路径字符串或数组, 支持通配符.
gulp.src(globs[, options])

// 写入文件, 作为pipe的一个流程.文件夹不存在时会被自动创建.
gulp.dest(path[, options])

// 监控文件,执行任务.
gulp.watch(glob [, opts], tasks) or gulp.watch(glob [, opts, cb])

Gulp详细API的说明可以查看gulp API docs

猿梦

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:4   其中:访客  3   博主  1

    • avatar 今日头条新闻 来自天朝的朋友 谷歌浏览器 Windows 7 0

      文章不错非常喜欢

      • avatar 起点 来自天朝的朋友 谷歌浏览器 Windows 7 1

        文章不错,好特易购支持你、乐泰可赛新胶水批发零售www.hyhaote.com

        • avatar 武胜婚庆公司 来自天朝的朋友 火狐浏览器 Windows 7 1

          这篇文章写得很好。