gulp で jade と SCSS と CoffeeScript 動かす為のメモ

grunt から gulp に移行したので感想と現状の設定ファイル

gulp

感想

Googleさんが作った Web Starter Kit の設定ファイルを読んで理解できる感じが衝撃的。

---

151104 追記

Web Starter Kit の gulpfile に babel 使われるようになって慣れてないと読み辛い。。

gulpfile.babel.js

---

grunt より簡単にいろいろとできるんだろうなって思えた。

勉強させていただいた記事（ググった順）

タスクランナーgulp入門

gulp.js その4 プラグイン一覧

BrowserSyncでうきうきレスポンシブ対応アプリ開発

LiveReload から BrowserSync に乗り換えてる

git pushがrejectされたときの解決の手順

non-fast forward エラーで強制的にpushする

gulp-autoprefixerよりもいい感じ。gulp-pleeeaseを使ってcssを処理しよう

gulpのアプローチ "なぜグローバルとローカルにインストールが必要なのか"

Plugin

• gulp [global]

$ npm install --global gulp

• gulp [Local]

$ npm install --save-dev gulp

HTML

• gulp-jade

$ npm install gulp-jade --save-dev

CSS

• gulp-sass

$ npm install gulp-sass --save-dev

• gulp-pleeease

$ npm install gulp-pleeease --save-dev

• gulp-csscomb

$ npm install gulp-csscomb --save-dev

• gulp-cssmin

$ npm install gulp-cssmin --save-dev

js

• gulp-coffee

$ npm install gulp-coffee --save-dev

• gulp-concat

$ npm install gulp-concat --save-dev

• gulp-uglify

$ npm install gulp-uglify --save-dev

その他

• gulp-data

$ npm install gulp-data --save-dev

• gulp-sitemap-files

$ npm install gulp-sitemap-files --save-dev

• run-sequence

https://www.npmjs.org/package/run-sequence
※gulp-run-sequence は推奨されていないとのこと

$ npm install run-sequence --save-dev

• gulp-plumber

$ npm install gulp-plumber --save-dev

• gulp-header

$ npm install gulp-header --save-dev

---

• BrowserSync + Gulp.js

$ npm install browser-sync gulp --save-dev

---

ファイル削除にはいろいろ問題があるみたい
http://qiita.com/shinnn/items/bd7ad79526eff37cebd0

Web Starter Kit で「del」を使ってたのでこちらを使用
https://github.com/google/web-starter-kit/blob/master/gulpfile.js

• del

$ npm install del --save-dev

gulpfile.js

'use strict';
var gulp = require('gulp');

var browserSync = require('browser-sync');
var reload = browserSync.reload;

var data = require('gulp-data');
var plumber = require('gulp-plumber');

var sass = require('gulp-sass');
var pleeease = require('gulp-pleeease');
var csscomb = require('gulp-csscomb');
var cssmin = require('gulp-cssmin');

var jade = require('gulp-jade');

var sitemap = require('gulp-sitemap');

var del = require('del');
var runSequence = require('run-sequence');
var header  = require('gulp-header');

var coffee  = require('gulp-coffee');
var concat  = require('gulp-concat');
var uglify  = require('gulp-uglify');

var AUTOPREFIXER_BROWSERS = [
  'ie >= 10',
  'ff >= 30',
  'chrome >= 34',
  'safari >= 7',
  'opera >= 23',
];
var pkg = require('./package.json');
var BANNER = [
  '@charset "utf-8";',
  '/**',
  ' * <%= pkg.name %> - <%= pkg.description %>',
  ' * @link <%= pkg.url %>',
  ' * @version v<%= pkg.version %>',
  ' * @Author <%= pkg.author %>',
  ' * @Author URI <%= pkg.author %>',
  ' */',
  ''
].join('\n');

gulp.task('default', function () {
  browserSync({
    notify: false,
    port: 3000,
    server: {
      baseDir: ['./dist/']
    }
  });
  gulp.watch(['./src/scss/*.scss','./src/scss/**/_*.scss'],['sass']);
  gulp.watch(['./src/jade/*.jade','./src/jade/**/*.jade','src/jade/**/_*.jade'],['jade']);
  gulp.watch(['./src/coffee/*.coffee','./src/coffee/**/_*.coffee'],['coffee']);
  gulp.watch(['./src/js/*.js'],['compile-js']);
});


gulp.task('sass', function () {
  gulp.src(['src/scss/*.scss','src/scss/**/_*.scss'])
    .pipe(plumber())
    .pipe(sass())
    .pipe(pleeease({
      minifier: false,
      autoprefixer: 'chrome >= 39'
    }))
    .on('error', console.error.bind(console))
    .pipe(header('@charset "utf-8";\n'))
    .pipe(gulp.dest('./dist/'))
    .on('end', reload);
});

gulp.task('sass:deproy', function () {
  gulp.src(['src/scss/*.scss','src/scss/**/_*.scss'])
    .pipe(sass())
    .pipe(pleeease({
      autoprefixer: AUTOPREFIXER_BROWSERS,
      minifier: false
    }))
    .pipe(csscomb())
    .pipe(cssmin())
    .pipe(header(BANNER, { pkg : pkg } ))
    .pipe(gulp.dest('./dist/'));
});

gulp.task('jade', function () {
  gulp.src(['./src/jade/*.jade','src/jade/**/*.jade','!src/jade/**/_*.jade'])
    .pipe(plumber())
    .pipe(data(function(file) {
      return require('./data.json');
    }))
    .pipe(jade({
      pretty: true
    }))
    .pipe(gulp.dest('./dist/'))
    .on('end', reload);
});

gulp.task('coffee', function () {
  gulp.src(['./src/coffee/*.coffee','./src/coffee/**/_*.coffee'])
    .pipe(plumber())
    .pipe(coffee({ bare: true }))
    .on('error', console.error.bind(console))
    .pipe(gulp.dest('./src/js/'))
});

gulp.task('compile-js',function () {
  var compileFileName = 'application.js'
  gulp.src(['./src/js/*.js','!src/js/' + compileFileName])
    .pipe(uglify())
    .pipe(concat(compileFileName))
    .pipe(gulp.dest('./dist/assets/js/'))
    .on('end', reload);
});

gulp.task('sitemap', function () {
  gulp.src('./dist/**/*.html')
    .pipe(sitemap({
      siteUrl: 'http://www.solana.asia/'
    }))
    .pipe(gulp.dest('./dist/'));
});

gulp.task('clean', function(cb) {
  del(['./dist/**/*.html','./dist/**/*.css','./dist/**/*.xml'], cb);
});

// ['clean'] の後サイトマップはうまく出力されない。タイミングの問題だろうけど特に使うこと無かったからこのまま
gulp.task('deproy',['clean'],function(cb) {
  runSequence(
    ['sass:deproy','jade'],
    'sitemap',
    cb
  );
});