gulp进阶插件 -- gulp-babel、gulp-postcss

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 [email protected] 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样式被自动加上了不同浏览器内核的兼容写法