Help us understand the problem. What is going on with this article?

gulpfile.jsの書き方確認。

More than 1 year has passed since last update.

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の記述↓

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'}))
吐き出しスタイルは指定出来ます!

形式種類   特徴                    
nested ネストされるので階層構造がわかりやすい
expanded 一般的な手書きのCSSに近い
compact セレクタごとに1行にまとめられる
compressed すべてが1行にまとめられる

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

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

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

新しいディレクトリ作って上記のプラグイン入れてgulpfile書いてgulp叩いたらエラーになった・・・
スクリーンショット 2016-03-19 19.42.57.png

記事投稿した後割とすぐだったのでエエエエエエエとなった。
で、エラーの原因は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']);
で場所指定するだけ〜
第一引数に監視したいファイルのパス、 第二引数に実行したいタスク名です。
なぜこの説明を忘れていたのか・・・・・。

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away