插件列表
使用Gulp构建项目,需要使用到很多其他NPM插件,下面是我们的项目会使用到的插件列表。
1.整体
gulp
项目构建主插件
rimraf
文件删除接口,主要用户清除构建目录以便于重新构建,支持通配符 rimraf(src)
open
使用浏览器打开网页 open(url)
lazypipe
延迟的管道接口,用户管道处理时,公共方法的提取 lazypipe()
lodash
静态方法库,提供了很多实用的JS方法,如判断对象是否为数组等。项目中推荐使用该工具,其API文档地址为:https://lodash.com/docs。
gulp-load-plugins
自动加载gulp插件的管理插件,避免手动去包含每个插件,可以使用该插件加载所有gulp-前缀的插件。 使用方法:
var $ = require("gulp-load-plugins")();
var gulp = require("gulp");
gulp.task("css", function(){
gulp.src("src/**/*.css")
.pipe($.sass({ outputStyle: 'expanded'}).on('error', $.sass.logError))
.pipe($.if(config.system.compresses, $.minifyCss()))
.pipe(gulp.dest("build"));
});
加载该组件后,可以通过 $. 格式调用所有gulp-插件,如调用gulp-filter插件的方法,可以使用$.filter() 上面代码中,使用了$.sass()、$.if()、$.minifyCss(),分别对应插件gulp-sass、 gulp-if、 gulp-minify-css, 这几个插件无需显示加载,但需要存在于项目中(即node_modules文件夹中)
gulp-connect
静态服务启动、管理插件
gulp-run-sequence
执行gulp任务插件,使用方法为
var runSequence = require("gulp-run-sequence");
gulp.task("task1", function(){
console.log("this is task 1.");
})
gulp.task("task2", function(){
console.log("this is task 2.");
})
gulp.task("task3", function(){
console.log("this is task 3.");
})
runSequence(['task1', 'task2'], 'task3', ['task4', 'task5'], ....);
task1和task2将会同步执行,执行结束后,task3再执行,以此类推。
gulp-filter
文件过滤插件,如过滤JS后执行JS处理,然后再过滤CSS执行CSS文件处理
gulp-if
条件判断插件 gulpIf(condition, runfunction)
gulp-plumber
统一错误处理插件
gulp-sourcemaps
在JS和CSS中添加map文件地址
2.JS
gulp-babel
JS处理插件,如处理ES6转义为ES5
babel-preset-es2015
ES6转义为ES5
gulp-uglify
JS压缩插件
3.CSS
gulp-sass
SASS转义为CSS
gulp-compass
Compass语法(SASS增强版)转义为CSS插件
gulp-autoprefixer
CSS自动添加浏览器兼容前缀
gulp-minify-css
CSS压缩插件
4.HTML
gulp-inject
自动将JS、CSS插入HTML
wiredep
将bower下的模块插入HTML
gulp-minify-html
HMTL压缩插件
gulp-useref
通过解读HTML中的JS、CSS文件链接对JS、CSS进行合并,然后更新HTML中的文件地址
gulp-rev
自动添加文件版本号
gulp-rev-collector
自动添加文件版本号