gulp
介绍
- gulp是一个基于 Nodejs 的自动化构建工具,中文主页: http://www.gulpjs.com.cn/
- 能自动化地完成 javascript/coffee/sass/less/html/image/css 等文件的合并、压缩、检查、监听文件变化、浏览器自动刷新、测试等任务
使用步骤:
-
安装 nodejs。保证 node 是 6 以上的版本。
C:\Users\AppData\Roaming\npm
-
创建一个简单的应用 gulp_test,文件结构如下:
|- gulpfile.js //gulp配置文件
|- package.json 不是必须的
- 全局安装gulp
npm install gulp -g 可以使用gulp命令
4. 局部安装gulp
npm install gulp --save-dev
-
配置编码: gulpfile.js
//引入gulp模块 const gulp = require('gulp'); //定义任务 第一个参数是任务的名字,第二个参数是执行任务的函数(回调函数) gulp.task('任务名', function() { console.log("明天放假啦")// 将你的任务的任务代码放在这 });
-
构建命令:
gulp 任务名
The following tasks did not complete: default
Did you forget to signal async completion?
错误的解决方法:
- 返回一个可读流
gulp.task('任务名', function() { return fs.createReadeStream(__dirname+"package.json") });
- 传入一个回调并执行
gulp.task('任务名', function(cb) { return cb() });
- 回调函数设置为 async 函数
gulp.task('任务名', async function() { console.log("明天放假啦")// 将你的任务的任务代码放在这 });
- 名字如果为default,那么任务名可以省略
gulp.task('defult', function() { console.log("明天放假啦")// 将你的任务的任务代码放在这 });
gulp 插件
gulp-jshint 语法检查:
jshint 选项配置地址 https://jshint.com/docs/options/
.jshintrc
配置参考
{
"esversion": 6,
"asi":true, // 允许不写结尾处的分号
"undef": true, // 使用之前必须定义
"devel": true, // 没有定义也可以使用 console,alert 进行调试
"eqeqeq": true, // 强制使用 ===
"unused": true, // 定义了必须使用
"globals": { // 配置全局变量,直接使用不会报错
"module": true
}
}
使用步骤:
- 安装插件
npm install jshint gulp-jshint --save-dev
- 引入 jshint:实现语法检查
const jshint = require('gulp-jshint')
- 定义任务
4.运行命令gulp.task('jshint', function() { // 将你的任务的任务代码放在这 return gulp.src('./src/js/*.js')//检查当前目录下src/js的所有JS文件 .pipe(jshint()) //管道 .pipe(jshint.reporter('default'));//输出检查结果 });
gulp jshint
gulp-babel 语法转换
-
安装插件:
npm install --save-dev gulp-babel @babel/core @babel/preset-env
-
引入:
const babel = require('gulp-babel');
-
定义任务:
gulp.task('babel', () => { return gulp.src('./src/js/*.js') .pipe(babel({ //进行语法转换 presets: ['@babel/env'] })).pipe(gulp.dest('build/js'))//输出到指定目录 });
-
运行命令:
gulp babel
经过 babel 转换后的 ES6 模块化语法变成了 CommonJs 语法,还需要用 browserify 转换
gulp-browserify 转换 CommonJs 模块化语法
-
安装插件:
npm install --save-dev gulp-browserify
-
安装插件(用于重命名)
npm install --save-dev gulp-rename
-
引入:
const browserify = require('gulp-browserify'); const rename = require('gulp-rename');
-
定义任务:
gulp.task('browserify', function() { return gulp.src('./build/js/index.js') .pipe(browserify()) //将CommonJs语法转换为浏览器能识别的语法 .pipe(rename('built.js')) //为了防止冲突将文件重命名 .pipe(gulp.dest('build/js')) //输出到指定位置 });
-
运行命令
gulp browserify
配置默认任务,让多个任务依次执行
定义默认任务
gulp.task('default', gulp.series('jshint', 'babel', 'browserify'));
gulp-uglify 压缩 JavaScript
-
安装插件
npm install --save-dev gulp-uglify
-
引入插件
const uglify = require('gulp-uglify');
-
定义任务
gulp.task('uglify', function () { return gulp.src('build/js/built.js') .pipe(uglify()) //压缩js .pipe(rename('dist.min.js')) .pipe(gulp.dest('dist/js')) });
-
运行命令
gulp uglify
gulp-less 编译 less 文件及使用 less-plugin-autoprefix 扩展前缀
-
安装插件
npm install gulp-less less-plugin-autoprefix -D
-
引入插件
const less = require('gulp-less'); const LessAutoprefix = require('less-plugin-autoprefix'); const autoprefix = new LessAutoprefix({ browsers: ['last 2 versions'] });兼容最后2个版本
-
定义任务:
gulp.task('less', function () { return gulp.src('./src/less/*.less') .pipe(less({ plugins: [autoprefix]//自动扩展前缀 })) .pipe(gulp.dest('./build/css')); });
-
运行命令:
gulp less
使用 gulp-concat 合并 CSS 文件
-
安装插件
npm install --save-dev gulp-concat
-
引入
const concat = require('gulp-concat');
-
定义任务
gulp.task('concat', function () { return gulp.src('./build/css/*.css') .pipe(concat('built.css')) .pipe(gulp.dest('./build/css/concat')); });
-
运行命令:
gulp concat
gulp-cssmin 压缩 CSS 文件
-
安装插件:
npm install --save-dev gulp-cssmin
-
引入
const cssmin = require('gulp-cssmin');
-
定义任务
gulp.task('cssmin', function () { return gulp.src('build/css/concat/built.css') .pipe(cssmin()) .pipe(rename('dist.min.css')) .pipe(gulp.dest('dist/css')); });
gulp-htmlmin 压缩 HTML 文件
- 安装插件
npm install --save gulp-htmlmin
- 引入
const htmlmin = require('gulp-htmlmin');
- 定义任务
gulp.task('htmlmin', () => { return gulp.src('src/index.html') .pipe(htmlmin({ collapseWhitespace: true ,//去除空格 removeComments:true //去除注释 })) .pipe(gulp.dest('dist')); });
自动化配置
-
安装模块
npm install gulp-livereload gulp-connect opn --save-dev
-
引入模块
const livereload = require('gulp-livereload'); const connect = require('gulp-connect'); const opn = require('opn');
-
自动执行任务,编译代码
//1. 在所有可能要执行任务后面加上 .pipe(livereload()); gulp.task('watch', function () { //2. 启动热加载服务 livereload.listen(); //3. 通过自己服务器打开项目,自动刷新 connect.server({ root: 'dist', port: 3000, livereload: true // 自动刷新 }); //3. 自动打开浏览器 opn('http://localhost:3000/index.html'); //4. 监视指定文件(第一个参数),一旦文件发生变化,就自动执行后面的任务(第二个参数) gulp.watch('src/css/*.less', gulp.series(['less', 'concat', 'cssmin'])); gulp.watch('./src/js/*.js', gulp.series(['jshint', 'babel', 'browserify', 'uglify'])); gulp.watch('./src/index.html', gulp.series('htmlmin')); });
备注:必须要在 src 文件夹中修改 index.html 中引入样式和脚本的路径,gulp 不会自动处理路径。
相关插件:
- gulp-concat : 合并文件(js/css)
- gulp-uglify : 压缩js文件
- gulp-rename : 文件重命名
- gulp-less : 编译less
- gulp-livereload : 实时自动编译刷新
重要API
- gulp.src(filePath/pathArr) :
- 指向指定路径的所有文件, 返回文件流对象
- 用于读取文件
- gulp.dest(dirPath/pathArr)
- 指向指定的所有文件夹
- 用于向文件夹中输出文件
- gulp.task(name, [deps], fn)
- 定义一个任务
- gulp.watch()
- 监视文件的变化