一篇迟到的gulp文章，代码合并压缩，less编译

时间 2019-11-12

原文原文链接

前言

这篇文章本应该在去年17年写的，但由于种种缘由没有写，其实主要是由于懒（捂脸）。gulp出来的时间已经很早了，16年的时候还很流行，到17年就被webpack
碾压下去了，不过因为本人接触gulp的时候比较晚，16年的时候才据说有这么个玩意，正真用它是在17年的时候，可是虽然如今webpack已经大行其道，咱们每一个人都
在积极去拥抱它，不过gulp在如今来讲也并非一无可取，仍是有用到的地方，因此，这篇文章我以为还有有必要写的，就当作是为gulp写的最后一篇文章吧，作技术就是
这么辛苦，技术更新太快，2,3年的时间就要换一拨技术，又得学习新的东西，否则面对这么激烈的市场，就得被淘汰。废话很少说了，下面开始正文。javascript

gulp是什么，能作什么

gulp是一个前端自动化流程构建工具，诸如，css，js，图片合并压缩，less,sass编译，之前咱们须要手工才能完成的工做，如今只要经过gulp并结合gulp插件就能够轻松的处理这些操做，极大的节省了开发时间，优化开发流程，提供生产效率。它跟gruntjs相比，gulpjs无需写一大堆繁杂的配置参数，提供的API很是简单，学习起来也很容易，另外，gulp是基于nodejs，是经过stream流的形式来读取和操做数据，速度方面更快。css

gulp API

一、gulp.src()
输出（Emits）符合所提供的匹配模式（glob）或者匹配模式的数组（array of globs）的文件。将返回一个 Vinyl files 的 stream 它能够被 piped 到别的插件中。html

gulp.src('client/templates/*.jade')
  .pipe(jade())
  .pipe(minify())
  .pipe(gulp.dest('build/minified_templates'));

二、gulp.dest()
能被 pipe 进来，而且将会写文件。而且从新输出（emits）全部数据，所以你能够将它 pipe 到多个文件夹。若是某文件夹不存在，将会自动建立它。前端

gulp.src('./client/templates/*.jade')
  .pipe(jade())
  .pipe(gulp.dest('./build/templates'))
  .pipe(minify())
  .pipe(gulp.dest('./build/minified_templates'));

三、gulp.task()
定义一个使用 Orchestrator 实现的任务（task）。java

gulp.task('somename', function() {
  // 作一些事
});

四、gulp.watch()
监视文件，而且能够在文件发生改动时候作一些事情。它总会返回一个 EventEmitter 来发射（emit） change 事件。node

var watcher = gulp.watch('js/**/*.js', ['uglify','reload']);
watcher.on('change', function(event) {
  console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
});

整理的一些gulp插件

1、必备插件，一些基础插件webpack

gulp-htmlmin 看到名字就能知道，这个插件是用来压缩 HTML。PS：注释啥的均可以去掉哦，看文档get更多技能哈
gulp-imagemin 除了能压缩常见的图片格式，还能压缩 SVG，叼叼的~
gulp-clean-css 压缩 CSS。我本来推荐的是 gulp-minify-css，结果其首页中已建议改用gulp-clean-css...
gulp-uglify 专业压缩 Javascript
gulp-concat 上面几个都是压缩，这插件是管合并的...恭喜，“减小网络请求”的成就达成:)
gulp-autoprefixer 给 CSS 增长前缀。解决某些CSS属性不是标准属性，有各类浏览器前缀的状况，灰常有用
gulp-rename 修改文件名称。好比有时咱们须要把app.js改为app.min.js，瞬间高级了
gulp-util 最基础的工具，但俺只用来打日志...

2、经常使用插件，一些有用的插件，但使用场景和频率没那么高的好插件git

run-sequence gulp 的 task 都是并行(异步)执行，若是碰见须要串行的场景，那么这个插件就是必备了。偶的使用场景是：处理(压缩、合并等等) CSS/JS、再gulp-rev、再上传 CDN；而后使用 CDN的地址替换 HTML 中的 CSS/JS 地址，再压缩 HTML。那么替换 HTML 这步须在以前的工做处理完后再执行。 ** 最后要说，gulp4.0发布后，不须要RS也能够搞定串行任务了 **
del / gulp-clean 删除。俺的使用场景是：JS/CSS 文件都会在压缩后使用gulp-rev，即文件名被hash，而后再上传到 CDN，最后俺再使用 删除插件 把本地压缩后的文件删除掉，不用多余保存。
gulp-rev 把静态文件名改为hash的形式。
gulp-rev-replace 配合 gulp-rev 使用，拿到生成的 manifest。json 后替换对应的文件名称。
gulp-rev-collector 到线上环境前，我会用来配合gulp-rev使用，替换 HTML 中的路径
gulp-rev-append 给页面引用的静态文件增长hash后缀，避免被浏览器缓存...固然，若是是使用 CDN，这个套路就不行了
gulp-connect / gulp-livereload LiveReload 的俩款插件都值得拥有，不过都各稍有学习成本，看看文档就明白鸟
gulp-sourcemaps 处理 JavaScript 时生成 SourceMap；若是你不了解 SourceMap，能够看看这篇阮一峰大神的《Source Map 详解》
gulp-load-plugins 帮忙偷懒用的，能够帮咱们加载插件，不用require或者import...固然，俺我的感受用了这个插件后，阅读gulpfile.js的可读性差了，鱼和熊掌不可兼得:(
gulp-jshint JavaScript 代码校验
gulp-sass / gulp-less 写 CSS 的同窗都懂哈

3、进阶插件，根据业务场景的不一样，咱们可能会用到这些插件github

babel JS 语法新特性用起来。这个插件可让咱们用新的 标准/特性/提案 写 JavaScript 代码，而后再向下 转换编译，最终生成随处可用的 JavaScript 代码。更通俗的说话就是：能够用新的规范写代码，通过 babel 编译后生成没有兼容问题的代码。
gulp-flatten 移动指定文件，不想压缩或者合并的时候，直接用这个插件把对应文件移动到指定文件夹。俺偶尔在内部项目会偷懒用上，图方便:)
gulp-coffee CoffeeScript 值得去了解
gulp-markdown-pdf 把 Markdown 编译为 PDF
gulp-markdown 写手的福音，能够把 Markdown 转成 HTML
gulp-html2md 把 HTML 编译为 Markdown
gulp-tinypng 超屌的图片压缩工具，使用 Tinypng 引擎。PS：由于 Tinypng 免费账号有月限制，因此使用使需注意。
sprity 生成雪碧图。稍有点学习成本，仔细阅读文档便可。
gulp-if 能够在 pipe 里面写点逻辑了，屌不屌。举例：好比处理 ./pub/*.js，若是文件名称是 xxx.js，那么不处理；更能够用来区分当前是开发环境仍是生产环境。
gulp-file-include 俺搞内部项目的时候会用到，让 HTML 组件化的第一小步
gulp-git 直接在 Build 时把代码都提交到 git上了...特么劳资懒起来连我本身都惧怕
gulp-qiniu 用于把指定文件上传至七牛的指定路径下(PS:首先，你得有本身的七牛帐号和空间)
gulp-notify 在控制台中加入文字描述，build 的时候更高级有木有。固然，当须要的时候把错误信息也展现出来会颇有帮助。更高级的功能就须要你查看其文档了~
gulp-plumber gulp 的错误处理有点坑，假如发生错误进程就挂了。相对的解决办法很多，可是这个是我我的比较推荐的，比特么在容易出错的地方写错误监听靠谱。因此这个插件能够阻止 gulp 插件发生错误致使进程退出并输出错误日志。

gulp的使用

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

var gulp = require('gulp');
gulp.task('default', function() {
     console.log("执行第一个gulp任务")
});

输入gulp命令执行该任务，不指定任务名称则默认执行default任务

二、同时执行多个任务

gulp.task('n1',function(){
    console.log("执行任务n1")
});
gulp.task('n2',function(){
    console.log("执行任务n2")
});
gulp.task('N',['n1','n2']);

三、若是有2个任务存在依赖关系，如任务A依赖任务B，在B任务执行完成以后再执行A任务

gulp.task('B',function(){
    console.log("执行任务B")
});
gulp.task('A',['B'],function(){
    console.log("任务B执行完成以后，开始执行任务A")
});

四、经过gulp.watch监听文件变化，这里新建一个watch task任务，用gulp.watch来监听index.html文件，执行该task任务

gulp.task('watch',function(){
    gulp.watch('./src/index.html').on('change', function(event) {
      console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
    });
});

修改index.html文件，能够看到控制台输出如下内容，event.type输出的是changed，除此以外还有added, deleted类型

五、编译less
这里使用gulp-less插件

安装  npm install --save-dev gulp-less

var less = require("gulp-less");
gulp.task('less',function(){
    console.log("开始编译less...")
    gulp.src('./src/less/index.less')
        .pipe(less())
        .pipe(gulp.dest('./src/css'));
    console.log("less编译完成");
});

能够看到自动为咱们生成了一个index同名css文件

使用gulp-postcss和autoprefixer 插件处理浏览器前缀，解决浏览器兼容性问题，没必要手动添加css前缀，而且支持soucemap

安装
npm install gulp-postcss --save-dev
npm install autoprefixer --save-dev
npm install gulp-sourcemaps --save-dev 

var less = require("gulp-less");
var postcss = require('gulp-postcss');
var sourcemaps   = require('gulp-sourcemaps');
var autoprefixer = require('autoprefixer');
gulp.task('less',function(){
    console.log("开始编译less...")
    gulp.src('./src/less/index.less')
        .pipe(less())
        .pipe(sourcemaps.init())
        .pipe(postcss([autoprefixer()]))
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest('./src/css'));
    console.log("less编译完成");
});

修改less文件添加如下样式：

.win{transform: translateX(-50%);}

执行编译less任务，能够看到index.css文件自动为transform添加了浏览器前缀

同时也为咱们生成了一个map格式文件

六、watch监听less文件变化，自动执行less编译任务

gulp.task('watch',function(){
    gulp.watch(['./src/less/index.less'],['less']);
});

当修改less文件并保存时，看到less文件已经编译完成了

七、使用broswer-sync自动刷新浏览器

安装
npm install browser-sync --save-dev
// 静态服务器 + 监听 less/html 文件
var browserSync = require('browser-sync').create();
gulp.task('browser-sync',['less'],function(){
    browserSync.init({
        server: {
            baseDir: "./src"   // 从这个项目的src目录启动服务器
        }
    });
    gulp.watch(['./src/less/index.less'],['less']);//监听less文件
    gulp.watch("src/*.html").on('change', browserSync.reload);//监听html文件变化 自动刷新浏览器
});

最后，修改html文件并保存，能够看到浏览器自动刷新了
less+css浏览器注入
在less任务后面添加如下代码，将less编译后的css注入到浏览器里实现更新，换句话说就是咱们修改less文件后编译完成后的css反应到浏览器页面中
.pipe(browserSync.reload({stream: true}));
添加以上代码后，但发现仍是没法实现刷新，这里若是咱们编译less使用了sourcemap，则没法刷新，能够经过gulp-filter来解决。

安装：
npm install gulp-filter --save-dev

修改编译less的任务，添加红色部份内容便可

八、使用gulp-clean-css压缩css文件并重命名

安装：
npm install gulp-clean-css --save-dev
npm install gulp-rename --save-dev

// 压缩css文件并重命名
var cleanCSS = require('gulp-clean-css');
var rename = require("gulp-rename");
gulp.task('minify-css',function(){
    gulp.src('./src/css/*.css')
        .pipe(rename({suffix: '.min'})) //suffix添加后缀   其余的还有prefix ， extname等
        .pipe(cleanCSS())
        .pipe(gulp.dest('./src/css'));
});

执行该task，能够看到生成了index.min.css压缩文件

九、为咱们的css文件MD5命名而且在引用的文件路径替换
主要用到 gulp-rev 和gulp-rev-collector这两个插件

安装
npm install gulp-rev --save-dev
npm install gulp-rev-collector --save-dev

// 压缩css文件并重命名
// md5文件命名  引用路径替换
var cleanCSS = require('gulp-clean-css');
var rename = require("gulp-rename");
var rev = require('gulp-rev');         //- 对文件名加MD5后缀
var revCollector = require('gulp-rev-collector');               //- 路径替换
gulp.task('minify-css',function(){
    console.log('开始压缩css文件')
    return gulp.src('./src/css/*.css')
        .pipe(rename({suffix:'.min'})) //文件重命名  suffix添加后缀   其余的还有prefix ， extname等
        .pipe(cleanCSS())   //压缩处理
        .pipe(rev())         //- 文件名加MD5后缀
        .pipe(gulp.dest('./src/css'))  //- 输出文件本地
        .pipe(rev.manifest())          //- 生成一个rev-manifest.json    后面的文件路径替换依据此文件内容
        .pipe(gulp.dest('./rev'));      //- 将 rev-manifest.json 保存到 rev 目录内
    console.log('css压缩完成...')
});

gulp运行 minify-css任务，能够看到生成了md5命名的css压缩文件

执行压缩以前先删除文件
del和gulp-clean插件都是用于清空文件，del能够用于替代gulp-clean，不推荐使用gulp-clean了

安装
npm install del --save-dev

// clean任务：在执行压缩以前先clean
var del  = require('del');
gulp.task('clean',function(cb){
  return del(['./dist']);
})

十、使用gulp-sequence插件处理同步任务
run-sequence gulp 的 task 都是并行(异步)执行，若是碰见须要串行的场景，那么这个插件就是必备了。偶的使用场景是：处理(压缩、合并等等) CSS/JS、再gulp-rev、再上传 CDN；而后使用 CDN的地址替换 HTML 中的 CSS/JS 地址，再压缩 HTML。那么替换 HTML 这步须在以前的工做处理完后再执行。 ** 最后要说，gulp4.0发布后，不须要RS也能够搞定串行任务了 **

执行前端代码自动构建，通常会分为如下几个步骤
1. 清理目标目录（任务：clean）
2. 代码压缩打包，这其中包括对JS，CSS，HTML以及图片的处理（任务：minify:js，minify:css，minify:html，minify:image）
3. 监控（任务：watch）

安装
npm install --save-dev run-sequence

// 同步执行任务
var runSequence = require('run-sequence');
gulp.task('build', function() {
  runSequence('rev');
});

十一、javascript代码压缩
gulp-uglify

安装
npm install gulp-uglify --save-dev
var uglify = require('gulp-uglify'); 
gulp.task('minify-js',function(){
     gulp.src('src/js/*.js')
        .pipe(uglify())  
        .pipe(gulp.dest('dist/js'));
});

压缩以后代码：

十二、html代码压缩
gulp-htmlmin

安装
npm install gulp-htmlmin --save-dev
var htmlmin = require('gulp-htmlmin');
gulp.task('minify-html', function() {
  return gulp.src('src/*.html')
    .pipe(htmlmin({collapseWhitespace: true}))
    .pipe(gulp.dest('dist'));
});

压缩以后代码：

1三、图片压缩(包括PNG、JPEG、GIF和SVG图片)
gulp-imagemin

安装
npm install gulp-imagemin --save-dev
gulp.task('minify-img', function() {
  return gulp.src('src/images/*.{png,jpg,gif,ico}')
    .pipe(imagemin())
    .pipe(gulp.dest('dist/images'));
});

压缩以前大小

压缩以后大小

其余参数

var imagemin = require('gulp-imagemin');
gulp.task('minify-img', function() {
  return gulp.src('src/images/*.{png,jpg,gif,ico}')
    .pipe(imagemin({
            optimizationLevel: 5, //类型：Number  默认：3  取值范围：0-7（优化等级）
            progressive: true, //类型：Boolean 默认：false 无损压缩jpg图片
            interlaced: true, //类型：Boolean 默认：false 隔行扫描gif进行渲染
            multipass: true //类型：Boolean 默认：false 屡次优化svg直到彻底优化
        }))
    .pipe(gulp.dest('dist/images'));
});

1四、js代码合并，减小http请求数量
gulp-concat

安装
npm install gulp-concat --save-dev
var concat = require('gulp-concat');
gulp.task('jsconcat', function () {
    gulp.src('src/js/*.js')
        .pipe(concat('main.js'))//合并后的文件名
        .pipe(gulp.dest('dist/js'));
});

坑记录

一、在编写less文件时报如下这个错误，发现是由于我sublime安装了less2css这个插件

首选项-》pageage setting找到less2css，发现default设置autocompile是true自动编译
修改user设置将autoCompile设置为false便可

{
  "autoCompile": true
}

二、在压缩css文件时，生成格式有问题

在压缩以前先清空目标文件

三、关于gulp的gulp-clean-css压缩插件参数问题

这是告诉cleancss压缩时要不要保留IE8及如下兼容写法，写compatibility:'ie7'就是保留ie7兼容写法。。好比zoom:1;这些，不保留它就给你删除了。。
压缩插件不只仅是压缩，还能优化，若是你用gulp-cssnano，还能帮你把多余的类名和属性合并。。等等

四、gulp中的return
在gulp这里，返回的是gulp.src这个对象，以便接下来的回调（若是有的话）能继续调用这个gulp.src对象，完成其余的事情。

task的回调函数必须得有返回值
return a promise or event stream。不然程序就至关于同步的
当任务有返回以上返回值时，则任务会按必定的顺序执行。

5.在开启静态服务器模式下，监听文件变化，若是执行clean删除任务会报如下错误

在开发环境，静态服务器模式下，不要执行clean任务

六、gulp.watch监听

gulp.task('watch',function(){
    gulp.watch('./stylesheets/**/*.scss',['sass']);
})

以上代码，**是指全部深度的文件夹，包括varible和mixin

最后

总结一下，本文从gulp是什么，gulp能作什么出发，对gulp简单的介绍了一下，包括gulp提供的一些API，而后整理并罗列了一些开发中经常使用到的gulp插件，
最后，就是从gulp安装到使用详细介绍了gulp的用法，以及使用gulp插件来构建前端自动化的开发流程。

以上在介绍gulp的使用时，我也准备了一个gulp的demo，demo代码我已经上传到github中，你们能够自行下载。另外，我创建了一个gulp自动化构建工程模板，支持less编译，html、css、js文件及图片压缩，自动添加浏览器前缀，本地开发环境下文件监听浏览器自动刷新等，不须要再从新搭建gulp工程，就能够轻松构建你的前端gulp自动化工做流程，代码已上传到github，地址https://github.com/fozero/template-gulp，若是喜欢的话，欢迎star哦~ ，若有问题也能够在上面提issues

一篇迟到的gulp文章，代码合并压缩，less编译

前言

gulp是什么，能作什么

gulp API

整理的一些gulp插件

gulp的使用

坑记录

最后

相关资料