引用借鉴: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])
注意:- globs是字符串或数组,表示待处理文件的路径,注意该路径相对于gulpfile.js所在位置;
- globs写法中,“app/**/*.js”表示app目录下的任意子目录下的后缀为js的所有文件;
-
options配置中最常用的是base:'somedir',指定与不指定base的区别在于处理后的文件的位置。请看下图:
指定了base,那么在build中构建后的文件目录结构跟somedir的目录结构相同
- ②gulp.dest(path[,options])
注意:- path可以是路径字符串或函数,当是函数时,该函数必须返回字符串;
- options中可以配置cwd和mode,用的不多。
- ③gulp.task(name[, deps], fn)
- deps数组,表示前置依赖的任务,即在运行name任务之前运行的任务,一般这些任务是异步的(使用一个 callback,或者返回一个 promise 或 stream),大部分情况下是使用返回stream的形式来实现异步
- deps数组,表示前置依赖的任务,即在运行name任务之前运行的任务,一般这些任务是异步的(使用一个 callback,或者返回一个 promise 或 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