gulp是目前前段工程化非常火的一款构建工具,gulp实现前端工程化的构建需要依赖插件的帮助,以下是gulp常用的插件。
一、gulp-load-plugins
插件自动加载插件,可以省去自己写很多require引入,可以这么实现对其它插件的引用,var gulpLoadPlugins = require("gulp-load-plugins"); var $ = gulpLoadPlugins();加入有一个autoprefixer插件,那么在task引用该插件的时候就可以这么写,gulp.src("***").pipe($.autoprefixer());具体更多的使用可以参考对应的gulp-load-plugins插件地址https://www.npmjs.com/package/gulp-load-plugins
二、browser-sync
浏览器同步省时插件,该插件可以大大提高前端的开发效率,使用基本的方法有:var browserSync = require("browser-sync");
var reload = browserSync.reload;
开启服务器的时候可以使用该形式:browserSync({
notify: false,
port: 9000,
server: {
baseDir:[],
routes: {
}
}
});
当然也可以参考https://www.browsersync.io/docs/gulp/该教程的实现方法
三、del
该插件为删除插件,用来删除目录和文件。var del = require("del");具体使用方法可以使用如下:del.bind(null, ["build"]);或者参考插件的官方教程:http://www.gulpjs.com.cn/docs/recipes/delete-files-folder/
四、gulp-sequence
该插件可以实现任务依赖的顺序正确执行,使用如下 var sequence = require("gulp-sequence");具体参考教程可以参考该插件的官方教程,https://github.com/teambition/gulp-sequence