おもむろに es6, sass で書きたい時のセット

.babelrc

{
  "presets": ["es2015"],
  // Remove the line below to enable ES2015 support.
  "retainLines": true
}

gulpfile.babel.js

'use strict';

/**
 * =================================
 * # モジュールの読み込み
 * =================================
 */

import gulp from 'gulp';
import runSequence from 'run-sequence';
import buffer from 'vinyl-buffer';
import stream from 'vinyl-source-stream';
import browserify from 'browserify';
import babelify from 'babelify';
import del from 'del';

import gulpLoadPlugins from 'gulp-load-plugins';

/**
 * =================================
 * # 定数の定義
 * =================================
 */

// gulp-**** と名のつくパッケージは $.****で呼び出せるように
const $ = gulpLoadPlugins();


/**
 * =================================
 * # Sass
 * Sass のコンパイル
 * =================================
 */
gulp.task('styles', () => {
    return gulp.src("assets/scss/admin.scss")
        .pipe($.plumber({errorHandler: $.notify.onError('<%= error.message %>')}))
        .pipe($.cssGlobbing({extensions: ['.css', '.scss']}))
        .pipe($.sourcemaps.init())
        .pipe($.sass.sync({
            outputStyle: 'expanded',
            precision: 10,
            includePaths: ['.']
        }).on('error', $.sass.logError))
        .pipe($.size({title: 'styles'}))
        .pipe(gulp.dest("assets/css"))
        .pipe($.notify("Styles Task Completed!"));
});


/**
 * =================================
 * # Babel
 * es6 のコンパイル
 * =================================
 */
gulp.task('babel', ()=> {
    browserify({
        entries: ["assets/es6/admin.es6"]
    })
    .transform(babelify)
    .bundle()
    .on("error", function (err) {
        console.log("Error : " + err.message);
    })
    .pipe(stream('admin.js'))
    .pipe(buffer())
    .pipe(gulp.dest("assets/js"))
    .pipe($.notify({message: 'Babel task complete！'}));
});

/**
 * =================================
 * # Watch
 * ファイルを監視
 * =================================
 */
gulp.task('watch', ()=> {
    gulp.watch(['assets/**/*.es6'], ['babel']);
    gulp.watch(['assets/**/*.{scss,css}'], ['styles']);
});

/**
 * =================================
 * # Default
 * gulp コマンドで呼び出されるデフォルトのタスク
 * =================================
 */
gulp.task('default', cb => {
    runSequence(
    'styles',
    'babel',
    'watch',
    cb
)
});

package.json

{
  "name": "sample",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "directories": {
    "test": "tests"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "browserify-shim": {
    "jquery": "global:jQuery"
  },
  "browserify": {
    "transform": [ "browserify-shim" ]
  },
  "devDependencies": {
    "babel-core": "^6.5.1",
    "babel-preset-es2015": "^6.3.13",
    "babel-register": "^6.5.1",
    "babelify": "^7.2.0",
    "browserify": "^13.0.0",
    "browserify-shim": "^3.8.12",
    "del": "^2.2.0",
    "gulp": "^3.9.0",
    "gulp-css-globbing": "^0.1.8",
    "gulp-load-plugins": "^1.2.0",
    "gulp-notify": "^2.2.0",
    "gulp-plumber": "^1.0.1",
    "gulp-sass": "^2.1.1",
    "gulp-size": "^2.0.0",
    "gulp-sourcemaps": "^1.6.0",
    "run-sequence": "^1.1.5",
    "vinyl-buffer": "^1.0.0",
    "vinyl-source-stream": "^1.1.0"
  },
  "dependencies": {
    "dropzone": "^4.2.0",
    "url-parse": "^1.0.5"
  }
}