Gulp入门教程

Gulp介绍

Gulp是一个前端开发的自动化构建工具。
前端开发每每须要把LESS/SCSS文件进行编译成CSS文件，JavaScript多文件合并成一个文件并压缩以及一些其余须要重复性操做的工做。而Gulp就是经过简单地代码配置与第三方插件的调用来帮助前端自动化完成这些操做。但不只限于此，你还能够用Gulp完成页面在线即时预览，jshint代码检查等各类前端任务。

Gulp的一个普通任务流程以下：

在终端里经过执行gulp task-name来执行指定任务，任务执行前能够先执行依赖任务。

本文只着重讲解Gulp的使用方法，其具体的安装及各类插件请访问Gulp官网进行查看。本教程分为两个部分：先讲解gulp的API使用及参数说明，后以一个实际项目案例做为演练。

第一节：接口说明

Gulp提供4个基础API进行调用，只须要掌握这4个API的使用方法并配合Gulp插件便能搭建一套自动化的前端开发任务系统。

• gulp.task()

• gulp.src()

• gulp.dest()

• gulp.watch()

Gulp.src(globs[, options])

此接口会匹配工做目录下指定规则的文件并返回提供给下一个插件管道使用。其中globs就是匹配格式，options是一些额外参数。

gulp.src('src/scss/master.scss')
    .pipe(sass())
    .pipe(gulp.dest('./dist’));

以上代码匹配master.scss文件返回给管道给sass插件进行编译操做，编译完成后送入下一个管道给gulp.dest接口输出到dist目录下。

globs
类型：字符串或者数组

此参数为文件匹配规则，例如./src/*/.scss将会匹配工做目录下src目录及子目录下全部scss文件格式的文件。字符匹配规则前带!则会排除此匹配的文件，例如：

gulp.src([
    'src/js/intro.js',
    'src/js/body.js',
    '!src/js/others.js',
    'src/hs/end.js'
]);

此将会按顺序匹配intro.js，body.js，end.js，排除了others.js

options
类型：对象

options.buffer (默认：true)
当设置为false的时候会把file.contents做为数据流(stream)返回而不是整个缓冲文件(buffer files)，这个选项在处理较大文件的时候比较有效。可是：不少插件并不支持数据流处理。

options.read (默认：true)
当设置为false的时候并不会读取文件并且返回file.contents为空。

options.base (默认：匹配规则前的目录地址)
咱们直接用代码演示吧：

gulp.src('src/js/**/*.js') //若是匹配到src/js/vendors/a.js, 那么base是src/js/
    .pipe(minify())
    .pipe(gulp.dest('dist')); //写入到dist/vendors/a.js

gulp.src('src/js/**/*.js', { base: 'src' }) //若是匹配到src/js/vendors/b.js
    .pipe(minify())
    .pipe(gulp.dest('dist')); //写入到dist/js/vendors/b.js

gulp.dest(path[, options])

此接口直接写入到文件里。(若是文件夹不存在则会建立对应文件夹)

gulp.src('src/js/body.js')
    .pipe(minify())
    .pipe(gulp.dest('dist/js')); //写入到dist/js/body.js

path
类型：字符串或者函数
具体输出目录或者一个函数返回目录

options
类型：对象

options.cwd(默认：process.cwd())
只有当输出路径为相对路径的时候才有效(通常用不到)

options.mode(默认：0777)
新建目录的权限(通常用不到)

gulp.task(name[, deps, fn])

定义一个须要自动执行的任务

gulp.task('sass', function() {
    gulp.src('src/scss/master.scss')
        .pipe(sass())
        .pipe(gulp.dest('dist/css'));
});
gulp.task('styles',['sass'], function() { 
    gulp.src('./dist/css/public.css') 
        .pipe(minifycss()) 
        .pipe(rename('public.min.css')) 
        .pipe(gulp.dest('dist/css'));
});

经过在终端运行gulp styles执行styles这个任务，此任务前先执行sass任务，完毕后再进行此任务，将public.css复制一份进行压缩并重命名为public.min.css到dist/css目录下。这里须要注意的是前提依赖任务若是有多个，通常它们并不会按照顺序执行，而是异步执行的。

gulp.watch(glob [, opts], tasks)或gulp.watch(glob [, opts, cb])

自动监视文件变化并执行指定的任务。

//监视'src/js/'目录下的全部js文件，若是有变更则当即执行uglify任务
gulp.watch('src/js/**/*/js', ['uglify']);
gulp.watch(glob[, opts, cb])

自动监视文件变化并执行回调函数。

event.type
类型：字符串
事件的类型，值为:added, changed, deleted.

event.path
类型：字符串
触发事件的文件地址

gulp.watch('js/**/*.js', function(event) {
  console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
});

第二节：实战项目

咱们将会创建一个自动编辑scss文件及自动打包多个js文件的项目做为演示

安装配置

Gulp是依赖Node.js运行的，你必须先安装Node.js，而后在命令行下经过执行如下命令全局安装Gulp。

$ npm install --global gulp

在项目根目录下运行如下命令建立package.json文件(用来配置项目常规设置)

$ npm init

而后继续运行如下命令，依次下载Gulp及咱们项目所需的依赖插件。

$ npm install --save-dev gulp
$ npm install --save-dev gulp-uglify
$ npm install --save-dev gulp-concat
$ npm install --save-dev gulp-autoprefixer
$ npm install --save-dev gulp-minify-css
$ npm install --save-dev gulp-rename
$ npm install --save-dev gulp-sass

在项目根目录下创建一个gulpfile.js文件做为Gulp任务程序，并按以下创建文件夹结构，dist的子目录不须要创建，在运行Gulp的时候会自动生成。

到此咱们的项目结构会以下所示：

.
|—dist/
|-node_modules/
|—src/
| |—scss/
| |—master.scss
| |—_base.scss
|
|—js/
| |-intro.js
| |-body.js
| |-others.js
| |-end.js
|
|-package.json
|-gulpfile.js

而后咱们来创建第一个默认任务吧，在gulpfile.js里输入如下代码：

var gulp = require('gulp'),
    sass = require('gulp-sass'),
    concat = require('gulp-concat'),
    minifycss = require('gulp-minify-css'),
    uglify = require('gulp-uglify'),
    rename = require('gulp-rename'),
    autoprefixer = require('gulp-autoprefixer');

gulp.task('default', function() {
  // 将你的默认的任务代码放在这
});

在终端里运行$ gulp命令，默认名为default的任务将会被运行。但此时默认任务没有任何工做。

scss编译任务

下面咱们添加一个scss编译任务，主要完成scss文件编译成css文件并进行多浏览器支持修正最后还要生成一个压缩版本的css文件。继续在gulpfile.js里添加以下代码：

gulp.task('sass', function() {
    gulp.src('./src/scss/**/*.scss') //匹配文件
    .pipe(sass({                       //sass模块编译
        outputStyle: 'expanded'
    }).on('error', sass.logError))
    .pipe(autoprefixer({               //进行浏览器兼容
        browsers: ['last 10 versions']
    }))
    .pipe(gulp.dest('./dist/css'))     //输出一份到dist/css目录
    .pipe(minifycss())                 //继续压缩一份
    .pipe(rename("public.min.css"))    //重命名避免覆盖上一次的输出
    .pipe(gulp.dest('./dist/css'));    //输出压缩好的新css文件
});

在终端运行$ gulp sass，将会执行名称为sass的任务，会自动完成咱们上面所说的功能。

js打包任务

咱们继续添加一个自动合并js文件并压缩的任务，继续在gulpfile.js里添加以下代码：

gulp.task('scripts', function() {
    gulp.src([
        './src/js/intro.js',
        './src/js/body.js',
        './src/js/end.js'
    ])
    .pipe(concat('app.js'))         // 合并为一个文件
    .pipe(gulp.dest('./dist/js'))   // 写入一份到指定目录
    .pipe(uglify())                 // 压缩一份
    .pipe(rename("buldle.min.js"))  // 并重命名以防覆盖上次写入的文件
    .pipe(gulp.dest('./dist/js'));  // 写入到指定目录
});

在终端运行$ gulp scripts，将会执行名称为scripts的任务，会自动完成咱们上面所说的功能。

监视自动化处理

下面咱们来修改默认任务，让每当执行默认任务的时候，自动执行sass与scripts这两个任务，修改default任务代码以下：

gulp.task('default', ['sass', 'scripts']);

这样，在终端运行$ gulp的时候，就会自动运行sass与scripts这两个任务了。

但每次修改如下scss文件或者js文件都要去运行一次$ gulp命令岂不是很麻烦，这里咱们就要用到gulp的gulp.watch接口来自动监视文件的变化并运行指定的任务，这样咱们就不要手动的去运行命令了。继续添加如下代码：

gulp.task('watcher', function() {
    gulp.watch("src/scss/**/*.scss", ['sass']);
    gulp.watch("src/js/*.js", ['scripts']);
});

这里咱们添加了一个名为watcher的任务，当在终端运行$gulp watcher命令后，Gulp将会自动监视咱们匹配文件的变化，每当文件改变了就会自动运行指定的任务。

到此，咱们这个项目的Gulp配置都完成了，每当咱们须要进行项目开发的时候，只须要在终端执行$ gulp watcher后，Gulp就会自动在后台监视运行了，咱们只须要好好写代码，其余的编译任务将会自动运行了。

项目代码下载：gulp-project

其余文献：

https://github.com/gulpjs/gulp/blob/master/docs/API.md (官方接口API文档)
https://github.com/gulpjs/gulp/tree/master/docs/recipes (不少演示项目代码)
https://github.com/gulpjs/gulp/blob/master/docs/README.md#articles (其它Gulp教程文章)