babelとsassをgulpから使うメモ


gulpfile.jsのメモ。
(Sassとbabelが欲しい時に)

gulpfile.js
var gulp = require('gulp');
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');
var plumber = require("gulp-plumber");
var babel = require("gulp-babel");

gulp.task('sass', function() {
  return gulp.src('./assets/sass/**/*.scss')
    .pipe(plumber())
    .pipe(sass({outputStyle: 'expanded'}))
    .pipe(autoprefixer({
            browsers: ["last 2 versions", "ie >= 9", "Android >= 4","ios_saf >= 8"],
            cascade: false
        }))
    .pipe(gulp.dest('./assets/css'));
});

gulp.task("babel", function () {
     return gulp.src("./assets/es6/**/*.js")
         .pipe(babel({presets: ['es2015']}))
         .pipe(gulp.dest("./assets/js"));
 });

gulp.task('default', function() {
  gulp.watch('./assets/sass/**/*.scss', ['sass']);
    gulp.watch('./assets/es6/**/*.js', ['babel']);
});
package.json
{
  "name": "site_template",
  "version": "1.0.0",
  "description": "template",
  "homepage": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-preset-es2015": "^6.24.1",
    "gulp": "^3.9.1",
    "gulp-autoprefixer": "^4.1.0",
    "gulp-babel": "^7.0.1",
    "gulp-plumber": "^1.2.0",
    "gulp-sass": "^3.1.0"
  }
}

「gulp」で監視開始。