gulp是一个前端自动化构建工具，基于流的构建系统，主要优点是速度，效率和简化
gulp可以干什么？
开发服务器，Sass,Less或Stylus文件的预处理器，处理JavaScript的自动化脚本，代码优化工具，压缩，编译或移动文件
gulp的官网：https://www.gulpjs.com.cn/
gulp类似的工具：grunt webpack
gulp是基于node.js的，gulp和所有插件都通过JavaScript编写并依托Node.js平台
1.gulp优点：
- 易于使用
- 构建快速
- 插件高质
- 易于学习
2.gulp的安装
全局安装 -> 使用gulp的命令
npm install gulp -g (4.0)
npm install gulp@next -g （3.9版本）
执行gulp -v 查看gulp的版本号
局部安装 -> 配置文件内依赖gulp
在本地下载
npm install gulp --save-dev(4.0)
npm install gulp@next --save-dev
3.gulp api
1.gulp.task(name,[deps],fn) //建任务
name:任务名 string
任务名为default : 执行 ---> gulp
任务名为minJs : 执行 ---> gulp 任务名
2.gulp.src(globs,[options]) //读文件
globs 数据类型：string/array 查找文件的规则
- 通配符路径匹配
- “src/a.js”
指定具体文件；
- “*”：匹配所有文件
例：src/*.js(包含src下的所有js文件)；
- “**”：匹配0个或多个子文件夹
例：src/*/.js(包含src的0个或多个子文件夹下的js文件)；
- “{}”：匹配多个属性
例：src/{a,b}.js(包含a.js和b.js文件) src/*.{jpg,png,gif}(src下的所有jpg/png/gif文件)；
- “!”：排除文件
例：!src/a.js(不包含src下的a.js文件)；
3.gulp.dest(输出的路径) //输出文件
4.gulp.serise(task1,task2,....) 设置任务的执行顺序 串行执行
5.gulp.parallel(task1,task2,.....) 设置任务的执行顺序 并行执行
6.gulp.watch(globs,gulp.serise/gulp.parallel(task1,task2..)) 监听文件变化，执行任务
gulp插件
| 插件 | 说明 |
|---|---|
| gulp-sass | 编译scss |
| gulp-less | 编译less |
| gulp-autoprefixer | 自动添加前缀 |
| gulp-concat | 合并文件 |
| gulp-clean-css | 压缩css |
| gulp-webserver | 起服务 |
| browser-sync | 起服务 |
| gulp-htmlmin | 压缩html |
| gulp-imagemin | 压缩图片 |
| gulp-uglify | 压缩js 不支持ES6 |
| gulp-babel | ES6--->ES5 |
| gulp-rev | 生成文件后缀 |
| gulp-rev-collector | 替换文件路径 |
编译scss 与sass
"gulp-sass": "^3.1.0"
var gScss = require('gulp-sass');
gulp.task('scss1', function() {
return gulp.src('./origin/*.scss') //指定scss文件
.pipe(gScss())//调用引入的文件 它抛出的是一个函数执行就行
.pipe(gulp.dest('./detection'));
});
编译less
"gulp-less": "^3.4.0"
var gLess = require('gulp-less');
gulp.task('less', function() {
gulp.src('./origin/*.less')
.pipe(gLess())
.pipe(gulp.dest('./detection/'));
});
自动添加前缀
gulp-autoprefixer
var autoprefixer = require("autoprefixer");
gulp.task('autopre', function() {
gulp.src("src/css/*.css")
.pipe(autoprefixer({
browsers: ['last 2 versions'] //离你最近的两个浏览器版本
))
.pipe(gulp.dest("dist")); //生成新文件
})
合并文件
gulp-concat
var concats = require('gulp-concat');
gulp.task('concat', function() {
gulp.src('./detection/*.css') //需要合并的文件
.pipe(concats('all.css')) //合并后的文件名
.pipe(gulp.dest('./dest/')); //合并后存贮的位置
});
压缩css
"gulp-clean-css"
var miniCss = require('gulp-clean-css');
gulp.task('minicss', function() {
gulp.src('./detection/style.css')
.pipe(miniCss())
.pipe(gulp.dest('./zlib/'));
});
gulp-webserver
port ：配置端口号
open: 自动打开浏览器
livereload: 自动刷新
host: 配置IP
fallback: 指定默认打开的文件
middleware:function(req,res,next){ //拦截前端请求
}
压缩html
"gulp-htmlmin": "^4.0.0"
var miniHtml = require('gulp-htmlmin');
gulp.task('miniH', function() {
gulp.src('./detection/index.html')
.pipe(miniHtml({
collapseWhitespace: true, //压缩HTML
}))
.pipe(gulp.dest('./zlib/'))
});
miniHtml参数
{
removeComments: true,//清除HTML注释
collapseWhitespace: true,//压缩HTML
collapseBooleanAttributes: true,//省略布尔属性的值 ==>
removeEmptyAttributes: true,//删除所有空格作属性值 ==>
removeScriptTypeAttributes: true,//删除