gulp使用流程及常用插件

引用借鉴：https://www.jianshu.com/p/82dfc29e70ab

本篇记录gulp使用流程及常用插件。

1.gulp使用流程：

① 安装依赖gulp包

全局命令：npm install -g gulp 
项目开发模式：npm install --save-dev gulp
项目生产模式：npm install --save gulp

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

③重构项目文件夹结构，创建src文件夹，放置源代码文件；创建dist目录放置构建后文件

④在gulpfile.js文件中编写任务

⑤下载gulp命令执行工具cli.    npm install gulp -cli -g（注意需要全局安装）

2、gulp常用API（4种）

• ①gulp.src(globs[, options])
  注意：
  1. globs是字符串或数组，表示待处理文件的路径，注意该路径相对于gulpfile.js所在位置；
  2. globs写法中，“app/**/*.js”表示app目录下的任意子目录下的后缀为js的所有文件；

  3. options配置中最常用的是base:'somedir'，指定与不指定base的区别在于处理后的文件的位置。请看下图：

      

     

     base的作用
     
     

     指定了base，那么在build中构建后的文件目录结构跟somedir的目录结构相同

• ②gulp.dest(path[,options])
  注意：
  1. path可以是路径字符串或函数，当是函数时，该函数必须返回字符串；
  2. options中可以配置cwd和mode，用的不多。
• ③gulp.task(name[, deps], fn)
  1. deps数组，表示前置依赖的任务，即在运行name任务之前运行的任务，一般这些任务是异步的（使用一个 callback，或者返回一个 promise 或 stream），大部分情况下是使用返回stream的形式来实现异步
     
      

     

     stream实现异步
• ④gulp.watch(glob [, opts], tasks) 或 gulp.watch(glob [, opts, cb])
  监听文件，一旦文件发生改变就会执行tasks数组中指定的任务，或者执行cb函数，并触发watcher的change事件

3、gulp简单插件

压缩模块：

• gulp-imagemin 压缩图片
• gulp-htmlmin 压缩html文件
• gulp-csso 压缩CSS文件
• gulp-uglify 压缩混淆Javascript文件

语法转化：

• gulp-less  less语法转化
• gulp-sass 编译sass
• gulp-babel 将ES6代码编译成ES5

文件操作

• del (替代gulp-clean) 删除整个文件夹
• gulp-rename 重命名文件
• gulp-concat  合并文件
• gulp-filter 在虚拟文件流中过滤文件。
• gulp-file-include 抽取文件公共代码

4、复杂插件

• gulp-replace 对指定文件内容进行替换，可以用正则
• gulp-usemin 将html中外链的css和js文件
• gulp-zip 将文件打包成zip
• gulp-sequence 串行执行任务，相对于gulp.task中依赖的任务是并行执行的
• gulp-rev-all 对js或css文件加MD5戳，缓存用
• gulp-postcss 与autoprefixer配合使用
• gulp-open 默认浏览器打开指定页面

5、其他node模块

• autoprefixer 自动加浏览器前缀
• browser-sync 文件内容变化浏览器自动刷新
• yargs 处理node命令传入的参数

cross-env 跨platform的命令处理，用法：cross-env NODE_ENV=production webpack --config build/webpack.config.js，若不加cross-env，

6、注意点

场景：任务A依赖任务B，C

• 1、前置任务B，C是并发执行的
• 2、前置任务B，C执行完毕后才开始执行A
• 3、若想让B，C串行执行，可使用插件gulp-sequ