gulpfile.jsの書き方確認。

2016.9/10 fileの書き方を更新しました。

gulpfile.jsの記述、コピペだけで済ましてると何がどうなってるか分からん・・・となったので、私のgulpfileを例に今一度確認します。

sassのコンパイルが出来て、エラーで監視が止まらなくて、デベロッパーでソースマップが出て、
メディアクエリの記述があちこちにバラけてる場合最終的にまとまってくれるタスクです。
↓プラグインはこちら↓
gulp-sass・・・sassのコンパイルをする
gulp-plumber・・・ファイル監視中におかしいとこがあっても監視をストップしない
gulp-sourcemaps・・・スタイルがどこのファイルから当てられてるのか分かるようになる
gulp-combine-media-queries・・・@mediaの記述があちこちに散らばってる場合、後ろの方にまとめてくれる

↓npmで入れられるgulpプラグイン一覧の公式ページ↓
npm install gulp

↓ちなみにターミナルでプラグインの入れ方はこちら↓
$ npm install --save-dev プラグイン名

↓gulpfile.jsの記述↓

var gulp = require('gulp');
var sass = require('gulp-sass');
var plumber = require('gulp-plumber');
var sourcemaps = require('gulp-sourcemaps');
var cmq = require('gulp-combine-media-queries');//@media

gulp.task('sass',function(){
    gulp.src('sass/*.scss')
    .pipe(sourcemaps.init())
    .pipe(plumber())
    .pipe(sass({style : 'expanded'})) 
    .pipe(sourcemaps.write())
    .pipe(gulp.dest('css'));
});

gulp.task('cmq', function () {
  gulp.src('css/*.css')
    .pipe(cmq({
      log: false
    }))
    .pipe(gulp.dest('css'));
});

gulp.task('watch', function () {
    gulp.watch('sass/*.scss', ['sass']);
});
gulp.task('default', ['sass','cmq']);

• var

最初にvarを使って変数にします。何故？そういうもんなんです。地球が回ってるのと一緒です。

• gulp.task

gulpを使って処理してほしいことを書きます。
gulp.task('プラグイン名',function(){});
これで囲って中に色々書いていきます！
gulp.src('ディレクトリ名')
実行ファイルの場所を指定して、
.pipe(プラグイン名())
で動作。コンパイルなどでファイルが生成される場合は、
.pipe(gulp.dest('ディレクトリ名'));
では吐き出し先を指定と。

.pipe(sass({style : 'expanded'}))
吐き出しスタイルは指定出来ます！

最後、default！
タスクがいっぱいあるとgulp実行時に『defaultを指定してー』と言われます。私は言われました・・・。
その時は一番下に
gulp.task('default', ['プラグイン名','プラグイン名']);
のように書いてデフォルト処理を指定すればやってくれます！
最近までこれ分からなくてあーーーーーとなってました・・・。

正直説明見ただけで完璧に理解出来ないので、やってみた方が早いすわ〜。

追記-------------------------------160319

新しいディレクトリ作って上記のプラグイン入れてgulpfile書いてgulp叩いたらエラーになった・・・

記事投稿した後割とすぐだったのでエエエエエエエとなった。
で、エラーの原因はgulp-combine-media-queriesらしかったので、
node_modulesの中のgulp-combine-media-queriesにあるindex.js、152目！

file.contents = new Buffer(cssJson);

を//でコメントアウトします。するとエラーは消えました〜よかった・・・
いずれ解決されるらしい？

追記-------------------------------160402

watchについて触れていなかった・・・
見たまんまですが、保存するたびにgulp叩かなくても自動的に更新してくれるいい奴。
sassディレの中を見てて欲しいので、
gulp.watch('sass/*.scss', ['sass']);
で場所指定するだけ〜
第一引数に監視したいファイルのパス、 第二引数に実行したいタスク名です。
なぜこの説明を忘れていたのか・・・・・。