Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
58
Help us understand the problem. What is going on with this article?
@hitomi5

gulpfile.jsの書き方確認。

More than 3 years have 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']);
で場所指定するだけ〜
第一引数に監視したいファイルのパス、 第二引数に実行したいタスク名です。
なぜこの説明を忘れていたのか・・・・・。

58
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  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
hitomi5

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
58
Help us understand the problem. What is going on with this article?