env指定环境是支持es6的，rules指定的是一些补充内容，比如字符串使用单引号还是双引号等。这个是根据个人喜好配置的，你可以选择添加你需要的规则。最后是extends，这里配置airbnb就用上了airbnb的一套eslint编码检查规则。
gulp-eslint插件用起来
import gulp from 'gulp' import eslint from 'gulp-eslint // 配置需要处理的文件目录和转码之后文件的存放目录 const paramConfig = { source: 'src/**/*.js', dest: 'build', }
引入相关模块之后开始写任务：
gulp.task('lint', () => { // eslint配置，使用配置的文件目录。排除node_modules下的全部文件。 return gulp.src([paramConfig.source, '!node_modules/**']) .pipe(eslint()) .pipe(eslint.result(result => { console.log(`ESLint result: ${result.filePath}`); console.log(`# Messages: ${result.messages.length}`); console.log(`# Warnings: ${result.warningCount}`); console.log(`# Errors: ${result.errorCount}`); })) .pipe(eslint.format()) .pipe(eslint.failOnError()) })
如前文所述，default任务是必须：
gulp.task('default', ['lint'], function () { // lint任务成功执行之后执行这个方法 });
跳转到项目的目录下，运行gulp命令。会得到如下的输出：
$ gulp [21:43:01] Requiring external module babel-register [21:43:01] Using gulpfile ~/Documents/test-polyfill/gulpfile.babel.js [21:43:01] Starting 'lint'... [21:43:02] Starting 'babel-sourcemaps'... ESLint result: ~/Documents/test-polyfill/src/index.js # Messages: 0 # Warnings: 0 # Errors: 0 ESLint result: ~/Documents/test-polyfill/src/test.js # Messages: 0 # Warnings: 0 # Errors: 0 [21:43:02] Finished 'lint' after 605 ms [21:43:02] Finished 'babel-sourcemaps' after 653 ms [21:43:02] Starting 'default'... gulp default task! [21:43:02] Finished 'default' after 98 μs
gulp和babel
这次同时处理babel和sourcemaps的问题。
首先安装插件：
复制代码 代码如下:
yarn add --dev gulp-babel // npm install --save-dev gulp-babel
import gulp-babel插件：
import babel from 'gulp-babel' import sourcemaps from 'gulp-sourcemaps'
添加任务：
gulp.task('babel-sourcemaps', () => { return gulp.src(paramConfig.source) .pipe(sourcemaps.init()) .pipe(babel()) .pipe(sourcemaps.write('.')) .pipe(gulp.dest(paramConfig.dest)) })
修改default任务：
javascript gulp.task('default', ['lint', 'babel-sourcemaps'], () => { console.log('gulp default task!') })
如果你不想用sourcemaps的话，可以这么写：
javascript gulp.task('babel', () => { return gulp.src(paramConfig.source) .pipe(babel()) .pipe(gulp.dest(paramConfig.dest)) })
把gulp放在npm命令体系下
babel老早就配置好了，现在和配置好了gulp。gulp每次输入命令基本上就是手动执行。现在应该让这个命令半自动执行了。
修改package.json文件，在其中添加scripts节点：
"scripts": { "build": "gulp", "start": "node build/index.js" },
如此一来，很多的命令都可以像gulp一样放在npm的scripts里执行。比如，现在可以在命令行李输入如下命令来实现lint和babel转码：
npm run build
开始执行：
npm start
总结
使用bebel可以提前使用最新的JavaScript语言特性，这样编写很多代码的时候会变得简洁高效。并且babel转码之后生成的代码也是非常规范的ES5写法，同时是在严格模式下的。所以，我们在写ES201x代码的时候不需要再添加'use strict';标识。
使用gulp又可以使很多不大不小但是很费时间的事自动处理。
把这两者结合在一起会让你的项目开发效率提升很多。所以，看到这里你不觉得你应该赶快在项目里使用这些技术，让开发进入快车道吗！！！？？？