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




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

## gulp

<http://gulpjs.com/>

### 感想

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

---
### 151104 追記

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

https://github.com/google/web-starter-kit

[gulpfile.babel.js](https://github.com/google/web-starter-kit/blob/master/gulpfile.babel.js)

---

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

### 勉強させていただいた記事（ググった順）
>
[タスクランナーgulp入門] (http://blog.webcreativepark.net/2014/05/12-183033.html)  
[gulp.js その4 プラグイン一覧](http://qiita.com/oreo3@github/items/0f037e7409be02336cb9)  
[BrowserSyncでうきうきレスポンシブ対応アプリ開発](http://mid0111.hatenablog.com/entry/2014/07/03/214329)  
[LiveReload から BrowserSync に乗り換えてる](http://kojika17.com/2014/06/browser-sync.html)  
[git pushがrejectされたときの解決の手順](http://d.hatena.ne.jp/snaka72/20100602/1275496817)  
[non-fast forward エラーで強制的にpushする](http://blog.digital-squad.net/article/132085683.html)  
[gulp-autoprefixerよりもいい感じ。gulp-pleeeaseを使ってcssを処理しよう](http://isee-web.net/?p=593)  
[gulpのアプローチ "なぜグローバルとローカルにインストールが必要なのか"](http://nakajmg.github.io/blog/2014-09-03/gulp-structure.html)

### Plugin

- gulp [global]

```bash
$ npm install --global gulp
```

- gulp [Local]

```bash
$ npm install --save-dev gulp
```

#### HTML

- gulp-jade

<https://www.npmjs.org/package/gulp-jade>

```bash
$ npm install gulp-jade --save-dev
```

#### CSS

- gulp-sass

<https://www.npmjs.org/package/gulp-sass>

```bash
$ npm install gulp-sass --save-dev
```

- gulp-pleeease

<https://www.npmjs.org/package/gulp-pleeease>

```bash
$ npm install gulp-pleeease --save-dev
```

- gulp-csscomb

<https://www.npmjs.org/package/gulp-csscomb>

```bash
$ npm install gulp-csscomb --save-dev
```

- gulp-cssmin

<https://www.npmjs.org/package/gulp-cssmin>

```bash
$ npm install gulp-cssmin --save-dev
```

#### js

- gulp-coffee

<https://github.com/wearefractal/gulp-coffee>

```bash
$ npm install gulp-coffee --save-dev
```

- gulp-concat

<https://www.npmjs.org/package/gulp-concat>

```bash
$ npm install gulp-concat --save-dev
```

- gulp-uglify

<https://www.npmjs.org/package/gulp-uglify>

```bash
$ npm install gulp-uglify --save-dev
```

#### その他

- gulp-data

<https://www.npmjs.org/package/gulp-data>

```bash
$ npm install gulp-data --save-dev
```

- gulp-sitemap-files

<https://www.npmjs.org/package/gulp-sitemap-files>

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

- run-sequence

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

```bash
$ npm install run-sequence --save-dev
```

- gulp-plumber

<https://www.npmjs.org/package/gulp-plumber>

```bash
$ npm install gulp-plumber --save-dev
```

- gulp-header

<https://www.npmjs.org/package/gulp-header>

```bash
$ npm install gulp-header --save-dev
```

---

- BrowserSync + Gulp.js

<http://www.browsersync.io/docs/gulp/>

```bash
$ 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

<https://www.npmjs.org/package/del>

```bash
$ npm install del --save-dev
```


### gulpfile.js

```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
  );
});

```