gulp是一个流式构建系统(把源代码生成用户可以使用的目标的自动化工具),是基于Node.js实现构建,开发者可以使用它在网站开发过程中自动执行常见任务,比如编译预处理CSS,压缩JavaScript,转化es6语法等。
gulp本身虽然不能完成很多任务,但它有大量插件可用,开发者可以访问插件页面或者在npm搜索gulpplugin就能看到各式各样的插件。针对自己需要实现的功能寻找合适的插件。
gulp与grunt对比
- grunt定义任务的时候需要有大量的配置,会引用大量你实际上并不需要的对象属性。gulp在同样的任务里也许只有几行就可以实现了。
- grunt会比gulp更加频繁地操作文件系统,所以使用数据流的Gulp总是比Grunt快。对于一个小的LESS文件,gulpfile.js通常需要6ms,而gruntfile.js则需要大概50ms——慢8倍多。这只是个简单的例子,对于长的文件,这个数字会增加得更显著。
gulp与webpack对比
- gulp与webpack的对比(侧重点不一样),并没有太多的可比性。gulp是一种能够优化前端的开发流程的工具,而webPack是一种模块化的解决方案
- gulp侧重于前端开发的整个过程的控制管理(像是流水线),我们可以通过给gulp配置不同的task(比如启动server、sass/less预编译、文件的合并压缩等等)来让gulp实现不同的功能,从而构建整个前端开发流程
- gulp是对整个过程进行控制,所以在其配置文件(gulpfile.js)中配置的每一个task,对项目中该task所配置路径下所有的资源都可以管理。
- webpack有人也称之为模块打包机,由此也可以看出webpack更侧重于模块打包。webpack管理资源的方式和gulp是不同的,它是根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源(如下图)。
glup的一些应用
一、把es6转化es5
主要插件:gulp-babel
步骤:
1.安装 Gulp
npm install gulp --save-dev
2.安装gulp-babel,babel-core 和babel-preset-es2015
npm install gulp-babel@7.0.1 babel-core babel-preset-es2015 --save-dev
注:gulp-babel版本不能超过8.0.0,否则会error
3.gulp配置:
在根目录下新增gulpfile.js文件,并创建task
var gulp = require("gulp");
var babel = require("gulp-babel");
gulp.task("default", function () {
return gulp.src("src/*.js")// ES6 源码存放的路径
.pipe(babel())
.pipe(gulp.dest("dist")); //转换成 ES5 存放的路径
});
4.babel配置:
在根目录下新增 .babelrc。内容如下:
{
"presets": ["es2015"]
}
5.es6文件测试:
在根目录下的src文件夹下新增testBabel.js文件。内容如下:
var a = `test es6`;
6.执行gulp
gulp
7.在dist文件夹下找到转化之后的js文件,es6模板字符串的语法被转化为es5语法
二、css前缀修正
主要插件:gulp-postcss、autoprefixer
步骤:
1.安装gulp-postcss插件
npm install gulp-postcss --save-dev
2.安装autoprefixer插件
npm install autoprefixer --save-dev
3.安装browsers
npm install -g bower
4.在根目录下新增gulpfile.js文件,并创建task:
var gulp = require('gulp'),
postcss = require('gulp-postcss'),
autoprefixer = require('autoprefixer');
gulp.task('autoprefixer', function(cb) {
gulp.src('./src/css/test.css')
//修正css前缀
.pipe(postcss())
.pipe(gulp.dest('./dist/css'))
cb();
});
5.css测试文件
在根目录下的src/css文件夹下创建test.css。内容如下:
div{
display: flex;
}
6.在根目录下的src/css文件夹下创建postcss.config.js。内容如下:
module.exports = {
plugins: {
'autoprefixer': {browsers: 'last 5 version'}
}
}
7.执行gulp autoprefixer
gulp autoprefixer
8.在build/css目录下找到test.css文件,此时css样式被自动加上了不同浏览器内核的兼容写法