gulp小结

时间 2019-11-07

原文原文链接

gulp是什么？

一个自动化构建工具，基于nodejs的自动任务运行器。javascript

为何要使用它？

易于使用，易于学习。它能自动化地完成javascript/coffee/sass/less/html/image/css 等文件的的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成，并监听文件在改动后重复指定的这些步骤。在实现上，她借鉴了Unix操做系统的管道（pipe）思想，前一级的输出，直接变成后一级的输入，使得在操做上很是简单。css

和grunt、webpack的区别

gulp和grunt很是相似，但相比于grunt的频繁IO操做，gulp的流操做，能更快地更便捷地完成构建工做。前二者定位是工具，webpack则是种模块化解决方案。html

说到 browserify / webpack ，那还要说到 seajs / requirejs 。这四个都是JS模块化的方案。其中seajs / require 是一种类型，browserify / webpack 是另外一种类型。vue

seajs / require : 是一种在线"编译" 模块的方案，至关于在页面上加载一个 CMD/AMD 解释器。这样浏览器就认识了 define、exports、module 这些东西。也就实现了模块化。java

browserify / webpack : 是一个预编译模块的方案，相比于上面，这个方案更加智能。node

gulp也能调用webpack。webpack

为何要用4.0？

组合任务。
好比之前的gulp对多个异步任务很难控制，必须借助于第三方模块，如run-sequence、event-stream等，效果也并不理想。web

如今gulp带来了两个新的api：gulp.series【顺序】和gulp.parallel【并行】，这两个革命性的api将帮助开发者解决恼人的任务流程控制问题。npm

//clear任务执行完后，才会执行copy
gulp.task("build",
  gulp.series("clear","copy")
 );

//inject:home和inject:list这2个任务同时执行
 gulp.task("inject-all",
  gulp.parallel("inject:home",
    "inject:list"
  )
 );

小技巧：一个任务中须要当即执行一下任务，之前版本有gulp run XX，新的没有，但能够这样：json

gulp.parallel('XX')();
gulp.series('XX')();

支持异步任务
有3种方式确认gulp可以识别任务什么时候完成。后2者重要是return
回调
返回一个流
返回一个Promise
更多参见这篇文章：http://codecloud.net/10666.html

npm包管理

包管理主要在根目录下的 package.json文件。
scripts中是一些npm的任务，npm run dev 便可执行。

dependencies是项目中必须的包，目前咱们没有用到，只有个vue。
devDependencies是开发所用的包，发布到生产环境不须要的都放在这里，平时安装时须要用npm install -save-dev XX，可简写做npm i -D XX。

同时安装多个包能够这样：npm install -save-dev aa bb。或者将包复制到package文件里，直接在根目录命令行里npm i或npm install。

包的版本：如"vue": "^2.0.1"

一个完整的版本号组表示为： [主要版本号，次要版本号，补丁版本号]
~会匹配最新的子版本（中间那个数字），好比~1.2.3会匹配全部的1.2.x版本，但不匹配到1.3.0及以上
^会匹配最新的主版本（第一个数字），好比^1.2.3将会匹配全部的1.x.x版本，2.0.0就缓缓飘过了。

怎么安装

全局：npm i gulp -g
工程内部：npm i -D gulp
工程根目录下建立gulpfile.js，它是配置文件。一个任务相似gulp.task('a',function(){});
在webstorm中右键gulpfile.js 选择Show Gulp Tasks打开Gulp窗口，双击任务a便可。

或者在命令行中，输入gulp a

几个API

gulp.src(globs[, options])

输出符合所提供的匹配模式或者匹配模式的数组的文件。将返回一个流，它能够被 pipe 到别的插件中。

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

globs能够是字符串，也能够是数组，相对路径或绝对路径均可以。举个例子：

["src/**/*.html", "!src/*.html", "src/play.html"]

表示目标是src下全部的html文件，但不包括根目录的html文件，却要包含根目录下play.html。

options：经过 glob-stream 所传递给 node-glob的参数，可传可不传。

options.buffer 类型： Boolean 默认值： true

若是该项被设置为 false，那么将会以 stream 方式返回 file.contents 而不是文件 buffer的形式。这在处理一些大文件的时候将会颇有用。

options.read 类型：Boolean 默认值： true

若是该项被设置为false，那么file.contents会返回空值（null），也就是并不会去读取文件。只获取文件路径，不须要读取内容时有用。

options.base

举个例子感觉一下，好比一个路径为 client/js/somedir 的目录中，有一个文件叫 somefile.js ：

gulp.src('client/js/**/*.js') // 匹配 'client/js/somedir/somefile.js' 而且将 `base` 解析为 `client/js/`
    .pipe(minify())
    .pipe(gulp.dest('build'));  // 写入 'build/somedir/somefile.js'

gulp.src('client/js/**/*.js', { base: 'client' })
    .pipe(minify())
    .pipe(gulp.dest('build'));  // 写入 'build/js/somedir/somefile.js'

gulp.dest(path[, options])

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

path 类型： String or Function

文件将被写入的路径（输出目录）。也能够传入一个函数，在函数中返回相应路径

options 类型： Object

options.cwd 类型： String 默认值： process.cwd()

输出目录的 cwd 参数，只在所给的输出目录是相对路径时候有效。

options.mode 类型： String 默认值： 0777

八进制权限字符，用以定义全部在输出目录中所建立的目录的权限。

gulp.watch(glob[, opts])

旧版本有个参数回调，好比：

gulp.watch('js/**/*.js', function(event) {
  console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
});

将变为：

var watcher = gulp.watch('js/**/*.js' /* 你也能够在这儿传入一些选项与/或一个任务函数 */);
watcher.on('all', function(event, path, stats) {
  console.log('File ' + path + ' was ' + event + ', running tasks...');
});

或监听单独的事件类型，基本的3种：增、删、改

watcher.on('change', function(path, stats) {
  console.log('File ' + path + ' was changed, running tasks...');
});

watcher.on('add', function(path) {
  console.log('File ' + path + ' was added, running tasks...');
});

watcher.on('unlink', function(path) {
  console.log('File ' + path + ' was removed, running tasks...');
});

基本插件

引用文件夹：require-dir

压缩js：gulp-uglify

有细节能够配置

uglify({
  compress: {
    drop_console:true, //删除console，默认false
    drop_debugger: false//忽略debugger，默认true
  }
 }

合并js：gulp-concat
压缩图片：gulp-imagemin
压缩html：gulp-htmlmin
压缩css：gulp-clean-css
压缩成zip包：gulp-zip

明星插件

简化书写gulp插件：gulp-load-plugins

var $ = require('gulp-load-plugins')();
gulp.src('from')

.pipe($.if(condition,$.uglify())//去除前面的'gulp-'
.pipe($.cleanCss())//原来名字叫gulp-clean-css，以驼峰形式使用
.pipe(gulp.dest('dist'));

重命名：gulp-rename

gulp.src('from').pipe(uglify())
```
.pipe(rename('XX'))
.pipe(gulp.dest('dist'));
```
条件：gulp-if

返回为true,调用后面的方法，其它不用。适用于既不肯意压缩或其它，但又必要将文件复制到指定目录的状况。

gulp.src('from')
    .pipe(if(function(file){
        if (file.path.endsWith('.min.js')) {
          return false;
        }
        return true;
    },uglify()))
.pipe(gulp.dest('dist'));

缓存：gulp-cache

很是有用，会将方法执行的结果缓存起来，当文件改变后，会从新执行方法，其它文件依然直接从缓存中读取结果。整个工程压缩完js须要2分钟以上，使用缓存后只须要1秒钟。js、css、图片这些大件耗时的都要用到。

注意：方法配置修改之后，缓存就没用了，须要手动删除缓存文件夹

gulp.src('from')
    .pipe($.cache($.uglify(), {
      fileCache: new Cache({
        "cacheDirName": "test",//缓存文件夹名称，默认为gulp-cache
        "tmpDir": "D:\\Documents\\gulp-cache"//指定一个本地的缓存目录，默认为C:\Users\Administrator\AppData\Local\Temp，建议换个目录，由于通常会看成垃圾清除掉
      }),
      name: 'js'//缓存文件夹名称再下一级的子目录，本例相似：D:\\Documents\\gulp-cache\\test\\js
    }))
    .pipe(gulp.dest('dist'));

系统提醒：gulp-notify

gulp.src('from')
        .pipe($.zip('map.zip'))
        .pipe(gulp.dest('dist'))
        .pipe($.notify({message: 'map压缩完成'}));

文件注入：gulp-inject

gulp.src('from', {cwd: "./src/entry/"})
        .pipe($.inject(gulp.src(['XX'], {read: false, cwd: 'XXdir'}), {
          relative: true,
          starttag: "<!-- start:pluginsJs -->",
          endtag: "<!-- end:pluginsJs -->",
          transform: function(filePath, index){
            return '<script src="' + filePath.substr(index) + '">' + '<' + '/script>';
          }
        }))

回调地狱终结者：q
q就是一个Promise库，提供额外的接口能够封装普通函数为Promise。

详见：http://blog.csdn.net/ii1245712564/article/details/51419533