gulp学习笔记4

gulp系列学习笔记：

之前的任务都是单个的，比较简单。接下去我们开始引用多个插件，一次性把任务搞定，省时又方便。

1、合并压缩js文件

　　为了提高网页的显示速度，最好是将所有的js文件合并成同一个文件，再来引用，这时候可以用到 gulp-concat 插件；进一步，还可以对其进行压缩。但是有时候我们在写js代码的时候，经常用到 console 语句和 debugger 语句。有时候会忘了删除，这时候我们可以用插件 gulp-strip-debug。

好了，任务开始，安装模块：

npm install gulp-concat --save-dev

npm install gulp-strip-debug --save-dev

npm install gulp-uglify --save-dev

在配置文件中编写相应的代码：

// 引用插件

var concat = require('gulp-concat');

var stripDebug = require('gulp-strip-debug');

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

// JS concat, strip debugging and minify

gulp.task('scripts', function() {
　// 将lib.js放在上面，其他文件任意顺序

  gulp.src(['./src/scripts/lib.js','./src/scripts/*.js'])

    .pipe(concat('script.js'))

    .pipe(stripDebug())

    .pipe(uglify())

    .pipe(gulp.dest('./build/scripts/'));

});

例如：

gulp.src(['./lib/file3.js', './lib/file1.js', './lib/file2.js'])

是将file3.js，file1.js 和 file2.js 按顺序进行合并。

后面输入相应的命令运行即可。

2、压缩合并css文件

与上一个任务基本相似，但是css里面不需要 gulp-strip-debug 插件，但是需要 gulp-autoprefixer 插件，能够自动添加css样式的前缀。

还是一样，安装相应的插件：

npm install gulp-autoprefixer --save-dev

npm install gulp-minify-css --save-dev

在配置文件添加如下代码：

// 引用插件

var autoprefix = require('gulp-autoprefixer');

var minifyCSS = require('gulp-minify-css');

// CSS concat, auto-prefix and minify

gulp.task('styles', function() {

  gulp.src(['./src/styles/*.css'])

    .pipe(concat('styles.css'))

    .pipe(autoprefix('last 2 versions'))

    .pipe(minifyCSS())

    .pipe(gulp.dest('./build/styles/'));

});

其中的 autoprefix('last 2 versions')含义是包含主流浏览器最近的2个版本。

后面输入相应的命令运行即可。

3、监听任务，自动执行

上面我们建立了很多任务，比如html，css和js压缩等，那我们每次要做某一件事就输一次命令是不是太麻烦了。我们完全可以这样做：

// 建立默认的gulp任务

gulp.task('default', ['imagemin', 'htmlpage', 'scripts', 'styles'], function() {

  // 监听 HTML 变化

  gulp.watch('./src/*.html', function() {

    gulp.run('htmlpage');

  });

  // 监听 js 变化

  gulp.watch('./src/scripts/*.js', function() {

    gulp.run('jshint', 'scripts');

  });

  // 监听 CSS 变化

  gulp.watch('./src/styles/*.css', function() {

    gulp.run('styles');

  });

});

把这些任务都监听后，我们要做的就是输入命令运行：

gulp

这样我们文件有修改，就会自动运行。

gulp还有其他很多好用插件，这就需要看个人的任务需要了。

文章参考了以下资料：

1、gulp详细入门教程: http://www.ydcss.com/archives/18;

2、gulp API 文档: http://www.gulpjs.com.cn/docs/api/;

3、gulp 入门指南: https://github.com/huanshen/gulp-book;

4、An Introduction to Gulp.js: https://www.sitepoint.com/introduction-gulp-js/