Gulp快速入门教程

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

最后，附上原文地址：http://www.zcbboke.com/1705.html