gulp常用功能集合（开发和生产分离、静态资源压缩优化、代码优化、实时预览、hash）

tags: gulp 前端自动化开发

npm仓库下载地址
https://www.npmjs.com/package/cddgulp

[TOC]
本人自用在此基础上的一个完整自用框架——cddgulp
npm点这里
github点这里
另一个基于vuepack改写的自用的webpack2.x+vue2.x的实时预览前端脚手架,点这里

1.功能需要

1. html文件复制、自动更改hash文件链接、文件内容替换

2. css文件复制与hash

3. img文件的复制与hash

4. js文件的复制、压缩、合并、重命名、hash

5. 对文件的监视与自动更新

6. 其他配合项包括compass/sas预编译，browser-sync实时预览

2.需要的gulp插件与详解

"devDependencies": {
    "del": "^2.2.1",
    "gulp": "^3.9.1",
    "gulp-cached": "^1.1.0",
    "gulp-changed": "^1.3.1",
    "gulp-clean-css": "^2.0.12",
    "gulp-concat": "^2.6.0",
    "gulp-csscomb": "^3.0.7",
    "gulp-htmlmin": "^2.0.0",
    "gulp-imagemin": "^3.0.2",
    "gulp-replace": "^0.5.4",
    "gulp-rev": "^7.1.0",
    "gulp-rev-collector": "^1.0.5",
    "gulp-uglify": "^2.0.0"
  }

1.del
: 该插件不是gulp的插件而是node的插件或者一个功能，作用是删除文件/文件夹。

2.gulp
: 这个就不用多说了，本地gulp插件

3.gulp-cached
: 这个插件用来对文件进行复制时，只是对那行更改过的文件进行复制，减少不必要的资源操作。在资源很多时，例如图片的复制，这个会加快gulp任务的执行速度，特别是需要实时预览时，减少延迟。

4.gulp-changed
: 这个插件跟gulp-cacahed插件类似，他主要是在对文件进行复制时，如果该文件没有改动过，那么就不允许该文件复制到目标文件件。（自己实测时看不出来，而且如果使用cached,就不用使用这个了）

5.gulp-clean-css
: 用来对css文件进行去注释，和压缩

6.gulp-concat
: 对文件进行合并，而且可以添加一个string参数，用来对合并的文件进行重命名

7.gulp-csscomb
: 对css进行版本支持

8.gulp-htmlmin
: 对html文件进行压缩，如去换行，去注释等

9.gulp-imagemin
: 对jpg、png等格式问的图片进行无损的压缩（特别有用，但是在你的node-modules中的插件过多时会存在图片压缩过慢的问题问题）

10.gulp-replace
: 用来替换文本文件中的内容

11.gulp-rev
: 对文件进行hash命名，并且生成对应的json文件

12.gulp-rev-collector
: 结合gulp-rev对hash的文件在html文件中进行引用路径更改

13.gulp-uglify
: 对js文件进行压缩，有人叫这个作“丑化”，确实挺丑的

本人没有在gulpfile.js文件使用实时预览的插件，因为这些任务已经很多了，gulp虽然速度很快，但是执行时也会有些迟缓，所以只是外部使用了browser-sync实时预览。

此外css预编译我使用的是sass，在集成到gulp预编译时如果出现了错误的语法，整个gulp监视任务就会完全停止，所以我是用的是外部sass监视。这个可以跟gulp一块使用，gulp只是监视css文件，然后进行自己的操作即可，二者各自做各自的事，出错了也不会有中断这样的影响。

3.gulpfile.js文件代码详解。

我的开发目录

源文件gulpfile.js 提取码：aea6

1.需引入的插件

var gulp = require('gulp');
var    changed = require('gulp-changed');
var    concat = require('gulp-concat');
var    htmlmin = require('gulp-htmlmin');
var    imagemin = require('gulp-imagemin');
var    uglify = require('gulp-uglify');
var    cleanCss = require('gulp-clean-css');
var cache = require('gulp-cached');
var rev = require('gulp-rev');
var replace = require('gulp-replace');
var del = require('del');
var revCollector = require('gulp-rev-collector');

2.各个任务详解

1.复制html task : copyHtml

: 代码如下

//对常用的东西进行变量化


var dir = '../dist';    //对目标根目录进行变量

gulp.task('copyHtml', function(){
    gulp.src('*.html')      //当前目录的HTML文件
    .pipe(cache('copyHtml'))       //只对修改的文件进行复制
    //.pipe(changed(dir))//只有变化的文件能够通过
    .pipe(htmlmin({collapseWhitespace: true,
        removeComments: true
    }))     //对html文件进行压缩处理，去换行，去注释
    .pipe(replace('a.js','main.js'))        //对html文件中的指定的文字进行替换
    .pipe(gulp.dest(dir));      //复制到目标文件
});

2.复制css task：copyCss

: 代码如下

gulp.task('copyCss',function(){
    del([dir+'/css/**/*'],{force: true});   //  由于每次更改css文件，进行hash的话旧的文件就会残留，因此每次写入前需要进行清空。
    gulp.src('css/main.css')
    // .pipe(changed(dir+'/css'))
    .pipe(cleanCss({conpatibility: 'ie8'}))     //进行压缩
    .pipe(rev())        //进行hash
    .pipe(gulp.dest(dir+'/css'))        
    .pipe(rev.manifest())       //产生hash对应的json文件
    .pipe(gulp.dest(dir+'/css'));
});

3.复制图片 task：copyImg

: 代码如下

gulp.task('copyImg', function () {
    gulp.src('img/*')
    .pipe(cache('copyImg'))     
    // .pipe(changed(dir+'/img'))
    .pipe(imagemin())   //对图片进行压缩
    .pipe(rev())
    .pipe(gulp.dest(dir+'/img'))
    .pipe(rev.manifest())
    .pipe(gulp.dest(dir+'/img'));
});

4.复制js文件 task：copyJs

: 代码如下

gulp.task('copyJs', function(){
    del([dir+'/js/**/*'],{force: true});    //与css同理删除
    gulp.src('js/*.js')
    .pipe(cache('copyJs'))
    .pipe(concat('main.js'))    //对js文件进行合并和重命名
    .pipe(uglify())        //对合并后的文件进行压缩
    .pipe(rev())
    .pipe(gulp.dest(dir+'/js'))
    .pipe(rev.manifest())
    .pipe(gulp.dest(dir+'/js'));
});

5.对html中的静态资源（css,js,image)进行hash后的文件引用替换

: 代码如下

gulp.task('rev',function(){
      gulp.src([dir+'/**/*.json', dir+'/*.html'])     //找到json，和目标html文件路径
     .pipe(revCollector({
         replaceReved: true,
         // dirReplacements: {
         //     'a.js':'main.js'
         // }这里主要是对文件路径中的文字进行修改
     }))     //进行替换
     .pipe(gulp.dest(dir));
 });

6.监视文件，并进行自动操作 task : watch

: 代码如下

gulp.task('watch',function(){
    gulp.watch('*.html', ['copyHtml']);     //监视html文件，如果发生变化就进行复制
    gulp.watch('css/main.css', ['copyCss']);       //监视css文件，如果发生变化就进行复制
    gulp.watch('img/*.{jpg,png}',['copyImg']);      //监视图片，如果发生变化就进行复制
    gulp.watch('js/*.js', ['copyJs']);      //监视js文件，如果发生变化就进行复制
    gulp.watch(dir+'/{**/*.json,/*.html}', ['rev'])     //监视json文件和html文件，如果发生变化就进行hash命名，和引用更改
});

7.设置默认任务 task : default

: 代码如下

gulp.task('default',['copyHtml','copyCss','copyImg','copyJs','watch']
);

8.lastWorks 最后的任务

: 代码如下

gulp.task('cleanCache', function(){
    delete cache.caches['copyHtml','copyImg','copyJs'];
})      //由于cache不会自动清除缓存的东西，所以需要手动消除


gulp.task('lastWorks',['cleanCache'] );

9.其他任务——清除开发文件夹（dist)

: 代码如下慎用

gulp.task('clean', function(){
     del(['../dist/**/*'],{force: true});
 });        //清除dist中所有的文件和文件夹，适合新的项目开始时使用

10.新任务开始前的旧任务打包 task：packageProject

: 代码如下

gulp.task('packageProject',function(){
     var zip = require('gulp-zip'); 
     var fileName = 'projectNew_0.zip';
     gulp.src(['../dist/**/*','!../dist/{css,js,img}/*.json'])      //找到目标文件夹并且进行去除json文件处理
     .pipe(zip(fileName))        //对文件进行压缩和重命名
     .pipe(gulp.dest('../../projectNew'));       //压缩到指定文件夹
 });

4.总结

现在流行的webpack包管理软件又要读前端进行革命了。但是gulp作为个入门短时间内还是不能够被取代得了的。

5.github项目地址：

点击这里