gulp 自动化构建工具

前言

gulp简介

gulp是一款常用的自动化构建工具，用于压缩、打包你的项目代码与文件。其他的类似的工具有grunt、webpack等。

gulp的优点

• 易于使用
  通过代码优于配置的策略，Gulp 让简单的任务简单，复杂的任务可管理。

• 构建快速
  利用 Node.js 流的威力，你可以快速构建项目并减少频繁的 IO 操作。

• 插件高质
  Gulp 严格的插件指南确保插件如你期望的那样简洁高质得工作。

• 易于学习
  通过最少的 API，掌握 Gulp 毫不费力，构建工作尽在掌握：如同一系列流管道。

下面只是介绍gulp的基本用法和常用插件。
详情查看：gulp中文网

安装与使用

1. 全局安装 gulp

$ npm install --global gulp

2. 开发依赖安装

$ npm install --save-dev gulp

3. gulpfile.js 文件

在项目根目录下创建一个名为 gulpfile.js 的文件

var gulp = require('gulp');

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

4. 运行 gulp

$ gulp

默认的名为 default 的任务（task）将会被执行，一般都把所有需要执行的放进default任务中
想要单独执行特定的任务（task），请输入 gulp 任务名,就会运行gulpfile.js文件中指定的任务。

插件

gulp本身并没有什么作用，需要依赖于插件来完成压缩、打包等功能。
插件在gulpfile.js中配置好后，通过gulp 任务名执行

gulp-rev

给文件添加版本号，在文件内容修改后，同时修改版本号，使得浏览器识别出来而不是用缓存里的文件，从而使用户看到最新的效果。

gulp-rev-replace

在文件名改变后，在index文件里改变替换文件的引用

gulp-useref

在html里面可以通过注释的方法，告诉gulp哪些文件要合并，合并后叫什么文件
格式：

<!-- build:css css/combined.css -->
<link href="css/one.css" rel="stylesheet">
<link href="css/two.css" rel="stylesheet">
<!-- endbuild -->
<!-- build:js scripts/combined.js -->
<script type="text/javascript" src="scripts/one.js"></script> 
<script type="text/javascript" src="scripts/two.js"></script> 
<!-- endbuild -->

gulp-filter

过滤器，两种操作，筛选、恢复

gulp-uglify

压缩js代码

gulp-csso

压缩css代码

gulp-watch

监听文件的改变，自动执行任务，修改了文件之后，自动打包，不用我们手动执行任务

gulp-postcss

与autoprefixer插件进行结合，来自动添加前缀

gulp-concat

直接把多个文件合并成一个文件

gulp-responsive

把大图片按照一定规则生成一系列的响应式图片

gulpfile.js基本设置

//所有的依赖项
var gulp = require('gulp');
var rev = require('gulp-rev');
var revReplace = require('gulp-rev-replace');
var useref = require('gulp-useref');
var filter = require('gulp-filter');
var uglify = require('gulp-uglify');
var csso = require('gulp-csso');

//执行的任务
gulp.task('default', function() {

var jsFilter = filter('**/*.js',{restore:true}); //过滤出js文件的变量

var cssFilter = filter('**/*.css',{restore:true}); //过滤出css文件的变量

var indexHtmlFilter = filter(['**/*','!**/index.html'],{restore:true}); //过滤出所有文件的变量，但是防止了改变index的文件名

//返回到压缩文件

return gulp.src('src/index.html')//执行任务的源文件，也就是水流
    .pipe(useref())//找到所有需要合并压缩的文件，并扔到流里
    .pipe(jsFilter)///找出js文件
    .pipe(uglify())//压缩js代码
    .pipe(jsFilter.restore)//把js文件扔回水流里
    .pipe(cssFilter)//找到css文件
    .pipe(csso())//压缩css代码
    .pipe(cssFilter.restore)//把css文件扔回流里
    .pipe(indexHtmlFilter)//找到所有文件
    .pipe(rev())//添加版本号
    .pipe(indexHtmlFilter.restore)//再扔回流里
     .pipe(revReplace())//替换文件引用
    .pipe(gulp.dest('dist'));//最后把所有文件放到dist文件夹
});

当然，你也可以把不同的操作分开，最终再放入default任务中

// 压缩 public 目录 css
gulp.task('minify-css', function() {
    return gulp.src('./public/**/*.css')
        .pipe(minifycss())
        .pipe(gulp.dest('./public'));
});
// 压缩 public 目录 html
gulp.task('minify-html', function() {
  return gulp.src('./public/**/*.html')
    .pipe(htmlclean())
    .pipe(htmlmin({
         removeComments: true,
         minifyJS: true,
         minifyCSS: true,
         minifyURLs: true,
    }))
    .pipe(gulp.dest('./public'))
});
// 压缩 public/js 目录 js
gulp.task('minify-js', function() {
    return gulp.src('./public/**/*.js')
        .pipe(uglify())
        .pipe(gulp.dest('./public'));
});
// 执行 gulp 命令时执行的任务
gulp.task('default', [
    'minify-html','minify-css','minify-js'
]);

注释写成/*! 的形式，就不会被压缩，可以用来写版权声明等信息