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

farmerz

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项目地址:

点击这里

阅读 3.7k

前端这两年(2016~)
近几年来前端的变化记录

可可西里,可可西里,我只是想去看一看。

1.2k 声望
53 粉丝
0 条评论

可可西里,可可西里,我只是想去看一看。

1.2k 声望
53 粉丝
宣传栏