可参考的gulp资源
入门:https://segmentfault.com/a/1190000000435599
比较详细:https://markpop.github.io/2014/09/17/Gulp%E5%85%A5%E9%97%A8%E6%95%99%E7%A8%8B/
babel使用gulp构建工具
1、安装
npm install babel-preset-es2015
2、在根目录下,建立一个.babelrc文件,文件内容如下:
{ "presets": ["es2015"] }
3、编写gulpfile.js(也是在根目录)文件,内容如下:
var gulp = require("gulp"); var jshint = require('gulp-jshint'); var sourcemaps = require("gulp-sourcemaps"); var babel = require("gulp-babel"); // 语法检查 gulp.task('jshint', function () { return gulp.src('src/*.js') .pipe(jshint()) .pipe(jshint.reporter('default')); }); //ES6=>ES5 gulp.task("default", function () { return gulp.src("js/*.js") .pipe(sourcemaps.init()) .pipe(babel()) .pipe(sourcemaps.write(".")) .pipe(gulp.dest("dist")); }); // 监视文件的变化 gulp.task('watch', function () { gulp.watch('js/*.js', ['jshint', 'default']); });
下面是使用gulp来编译sass的,也使用sourcemaps可以定位到对应的sass文件
var gulp = require('gulp'); var sass = require('gulp-ruby-sass'); var sourcemaps = require('gulp-sourcemaps'); gulp.task('sass', function () { return sass('./sass/*.scss', { sourcemap: true }) .on('error', sass.logError) // For inline sourcemaps .pipe(sourcemaps.write()) .pipe(gulp.dest('css')); }); gulp.task('watch',function(){ gulp.watch('./sass/*.scss',['sass']); }); gulp.task('default', ['sass','watch']);
注意:sass中文注释会出现,提示GBK问题,可以通过下面的方法来解决:
找到engine.rb文件(一般位于Ruby22lib ubygems2.2.0gemssass-3.4.18libsass目录下面),在所有的require后面新增如下代码:
Encoding.default_external = Encoding.find('utf-8')