tools

gulp

Posted by VickyWu on October 14, 2016

1 什么是gulp、为什么使用gulp

Gulp是一个构建系统，它能通过自动执行常见任务，比如编译预处理CSS，压缩JavaScript，来改进网站开发的过程。

将less文件编译到css文件，将coffeescript、Typescript编译到JavaScript，将ES6的代码编译到ES5的代码，将css和JavaScript压缩混淆合并等等……这些都是相当麻烦的事情。一个项目里可能大量地使用了各种新技术，那样整个项目的构建就变成了十分复杂的事情。为了解决这个问题，就产生了自动化构建工具。

gulp是当前比较流行的一种。

曾经流行过的类似框架有grunt，现在比较新的则是webpack。

2 参考文档

官方网站：http://gulpjs.com

gulp插件地址：http://gulpjs.com/plugins

中文文档：http://www.gulpjs.com.cn/

中文教程1:http://www.ydcss.com/archives/18

中文教程2:https://wizardforcel.gitbooks.io/gulp-doc/content/index.html

3 gulp的安装

  1. 首先，需要nodejs环境。
  2. 在命令行中执行npm install gulp -g全局安装gulp。
  3. 在需要使用gulp的项目文件夹中用命令行执行npm install gulp --save-dev把gulp安装到本地的开发依赖目录下。因为gulp只是开发过程中需要用到的包，在真正上线的项目中不需要包含gulp。

4 gulp的简单使用

gulp使用了管道的思想。

所谓的管道，指的就是把持续想象成一个一个的小管子，每个管子都能对流过自身的数据做一些处理，然后把这些处理过的数据交给下一根管子。

不同的管子拼接到一起，就可以达到“初始数据在经过一系列处理之后变成了最终想要的处理过的数据。”

4.1 来看一个简单的例子。

  1. 首先，在目录下打开命令行，执行：

    npm install gulp -g

    npm install gulp --save-dev

    npm install –save-dev gulp-uglify

  2. 然后，创建js/app.js文件，输入一些简单的内容。

     function logHello(name) {
     console.log('hello ' + name);
 }

  3. 然后，创建一个名为gulpfile.js的文件，并输入以下内容：

     var gulp = require('gulp'),
    uglify = require('gulp-uglify');
	
 gulp.task('default', function () {
    gulp.src('js/app.js')
       .pipe(uglify())
       .pipe(gulp.dest('build'))
 });

4.在命令行执行gulp。

  • 然后会看到新增了一个/build目录和/build/app.js文件，内容如下：

      function logHello(l){console.log("hello "+l)}

4.2 在这个例子中：

  1. 安装gulp到全局，并在本地开发目录下安装gulp，并安装了一个gulp插件“gulp-uglify”。

    gulp插件可以简单理解为：就是中间的那些用于对流过的数据进行处理的管子。

  2. 准备好即将被处理的源文件。
  3. 创建gulpfile.js文件。gulpfile.js文件指导了gulp应该有怎样的行为。
    1. gulpfile.js的语法类似于node，所以要先引入gulp的模块。
    2. gulp.task用于创建一个gulp任务。gulp的行为是由一个到多个gulp任务组成的。
      1. gulp任务创建的方式是gulp.task(taskName,callback).
        1. taskName是任务的名字，字符串。
        2. callback是任务执行时调用的回调函数。
      2. gulp如果没指定的话，会执行名为default的任务。
    3. gulp.src用于载入源文件。对于管道系统来说，src就是“水源”。这个函数返回来的对象就是管道对象，可以对他使用pipe函数，进行管道处理。
    4. uglify是我们的gulp-uglify插件。.pipe(uglify())这行代码的意思是：在数据“流经”这一根管道时，使用uglify来对数据记性处理。
    5. gulp.dest('build')是“数据流向了哪里”，参数是“最后把文件放到哪个文件夹下”。

4.3 globs语法

在src和dist里面，用于描述文件路径的字符串可以使用路径模式匹配：glob或者glob数组。以完成一次性匹配多个文件的功能。

示例如下：

  • js/app.js 精确匹配文件
  • js/*.js 仅匹配js目录下的所有后缀为.js的文件
  • js/**/*.js 匹配js目录及其子目录下所有后缀为.js的文件
  • !js/app.js 从匹配结果中排除js/app.js，这种方法在你想要匹配除了特殊文件之外的所有文件时非常管用
  • *.+(js|css) 匹配根目录下所有后缀为.js或者.css的文件

配合使用的简单举例：

gulp.src(['js/**/*.js', '!js/**/*.min.js'])

匹配js文件夹及其子目录下的.js文件，但其中不包括.min.js文件。

var gulp = require('gulp'),
   uglify = require('gulp-uglify');

gulp.task('default', function () {
   gulp.src(['js/**/*.js','!js/**/*.min.js'])
      .pipe(uglify())
      .pipe(gulp.dest('build'))
});

5 Gulp API介绍

5.1 gulp.task

5.1.1 创建一个gulp任务。

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

其中：

  • name：任务名
  • deps：在该任务执行之前要执行的其他任务，可选
  • fn：任务本体，回调函数

5.1.2 顺序执行任务

普通的任务都已经试着写过了。现在来研究任务顺序执行的问题。

var gulp = require('gulp'),
	uglify = require('gulp-uglify');

gulp.task('default', ['before',] function () {
	gulp.src(['js/**/*.js', '!js/**/*.min.js'])
		.pipe(uglify())
		.pipe(gulp.dest('build'))
});

gulp.task('before',function () {
	console.log('before running');
})

这样做的话，before就会优先于default来执行。

5.1.3 顺序执行异步任务

有时会有这种需求：当一个异步的任务执行完毕之后，再去执行下一个任务。

解决方案有两种：

  1. 使用gulp提供的回调函数

     gulp.task('timeout', function (cb) {
     console.log('timeout waiting 5s');
     setTimeout(function () {
         cb();
     }, 5000)
 })

  2. 返回流对象

     gulp.task('before', function () {
     return gulp.src(['js/**/*.js', '!js/**/*.min.js'])
         .pipe(uglify())
 })

5.2 gulp.src

用于从数据源创建一个gulp流。

5.2.1 用法：

gulp.src(globs[, options])

其中globs就是我们的文件名或者文件匹配字符串。

options是选项对象，通常只需要注意一个选项：options.base

如下例：

gulp.src('client/js/**/*.js') // 匹配 'client/js/somedir/somefile.js' 并且将 `base` 解析为 `client/js/`
  .pipe(minify())
  .pipe(gulp.dest('build'));  // 写入 'build/somedir/somefile.js'

gulp.src('client/js/**/*.js', { base: 'client' })
  .pipe(minify())
  .pipe(gulp.dest('build'));  // 写入 'build/js/somedir/somefile.js'

5.3 gulp.dest

用于把gulp流输出到制定的路径。

5.3.1 用法：

.pipe(gulp.dest(path)

path就是指输出的路径

5.4 gulp.watch

gulp.watch用于监控文件变化，当文件内容有变化时，就执行指定的任务。

5.4.1 用法：

gulp.task('watch', function () {
   var watcher = gulp.watch('src/*.*', ['default']);
});

第一个参数是路径，第二个参数是要执行的任务。

其中，watcher对象可以绑定一些事件，比如：

gulp.task('watch', function () {
	var watcher = gulp.watch('js/*.*', ['default']);
	watcher.on('change',function (d) {
		console.log('change',d)
	})
});

其他事件有：

  • end 在watcher结束时触发（这意味着，在文件改变的时候，任务或者回调不会执行）
  • error 在出现error时触发
  • ready 在文件被找到并正被监听时触发
  • nomatch 在glob没有匹配到任何文件时触发

watcher上还有一些可以调用的方法：

  • watcher.end() 停止watcher（以便停止执行后面的任务或者回调函数）
  • watcher.files() 返回watcher监听的文件列表
  • watcher.add(glob) 将与指定glob相匹配的文件添加到watcher（也接受可选的回调当第二个参数）
  • watcher.remove(filepath) 从watcher中移除个别文件

5.4.2 细节

除了执行任务外，watch还可以在数据变更时执行回调函数。

6 Gulp常用插件

https://markgoodyear.com/2014/01/getting-started-with-gulp/

6.1 del

用于删除文件或者文件夹

npm install del --save-dev

var gulp = require('gulp'),
	uglify = require('gulp-uglify'),
	del = require('del');

gulp.task('default', function () {
	del('build');
});

6.2 gulp-concat

用于把多个文件合并起来(js和css都可以)

npm install gulp-concat --save-dev

gulp.task('default', function () {
	gulp.src('js/**/*.js')
	.pipe(concat('all.js'))
	.pipe(gulp.dest('dist'))
});

6.3 gulp-rename

重命名文件

npm install gulp-rename --save-dev

gulp.task('default', function () {
	gulp.src('js/**/*.js')
	.pipe(rename({
		prefix:'demo-',
		suffix:'-min'
	}))
	.pipe(gulp.dest('dist'))
});

6.4 gulp-uglify

压缩JavaScript文件

npm install gulp-uglify --save-dev

6.5 gulp-cssnano

压缩css文件

npm install gulp-cssnano --save-dev

gulp.task('default', function () {
	gulp.src('css/**/*.css')
	.pipe(cssnano())
	.pipe(gulp.dest('dist'))
});

6.6 gulp-minify-html

压缩html npm install gulp-minify-html --save-dev

gulp.task('default', function () {
	gulp.src('page/**/*.html')
	.pipe(htmlMinify())
	.pipe(gulp.dest('dist'))
});
FEATURED TAGS
功能 js jQuery H5/C3 tools 框架 css
FRIENDS