发布于 2016-01-15 03:24:15 | 434 次阅读 | 评论: 0 | 来源: PHPERZ

这里有新鲜出炉的精品教程，程序狗速度看过来！

GulpJS 流构建系统

从头编写HTML\CSS\Javascript是上个世纪的事情了，如今的JavaScript都是通过CoffeeScript这样的支持句法缩写的编辑器写成的。如果你希望写完JavaScript能够一个工具完成代码清理优化工作，Gulp 就是你的不二之选，GulpJS类似Ant或Maven之于Java。

---

更新到gulp 3.9版本后，我们现在可以在gulpfile里使用ES6（或者叫ES2015）了。

首先需要确定gulp本地版本和命令行的gulp版本为3.9，打开命令行，输入以下命令检查你的版本：

gulp -v

然后应该返回：

CLI version 3.9.0
Local version 3.9.0

如果你的版本号低于3.9，在package.json文件里面更新你的gulp，然后运行下面的更新命令：

npm install gulp && npm install gulp -g

创建ES6 gulpfile

使用ES6，你需要安装Babel（确保你有Babel 6），在你项目作为依赖，且需要es2015的插件作为前置。

npm install babel-core babel-preset-es2015 --save-dev

安装好了之后，需要创建一个.babelrc配置文件，用于es2015的设置，添加下面的代码到文件中：

{
    "presets": ["es2015"]
}

然后需要让gulp使用Babel，我们需要把gulpfile.js重命名为gulpfile.babel.js:

mv "gulpfile.js" "gulpfile.babel.js"

现在可以通过Babel使用ES6啦，一个典型的使用es6新特性的gulp任务例子：

'use strict';

import gulp from 'gulp';
import sass from 'gulp-sass';
import autoprefixer from 'gulp-autoprefixer';
import sourcemaps from 'gulp-sourcemaps';

const dirs = {
  src: 'src',
  dest: 'build'
};

const sassPaths = {
  src: `${dirs.src}/app.scss`,
  dest: `${dirs.dest}/styles/`
};

gulp.task('styles', () => {
  return gulp.src(paths.src)
    .pipe(sourcemaps.init())
    .pipe(sass.sync().on('error', plugins.sass.logError))
    .pipe(autoprefixer())
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest(paths.dest));
});

以上。
ps： 不会翻译的说。