可参考的gulp资源

可参考的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')