Gulpファイルのメモ的なエントリーです。
「2017年にGulp!?」とかは禁句です。
Node.jsとGulpのインストールが終わっている前提です。
Gulpの設定色々
まずは作業を行うディレクトリに移動
cd フォルダまでのパス
移動したらpackage.jsonを作成。作成するには以下のコマンドを打って下さい。
npm init
とりあえず今回は全部未入力でEnter連打
そうすると以下のようなファイルが出来上がります。
{ "name": "gulp_test", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC" }
Gulpをフォルダにインストール
npm install gulp
Sassをコンパイル
ルビーがインストールされているかチェック
ruby -v
されてなかったら頑張ってインストール(結構面倒だった気がする)。
Sassがインストールされているかチェック
sass -v
されてなかったらインストール。Windowsは以下のコマンドでインストールできます。
gem install sass
Macだったら以下のコマンド
sudo gem install sass
プロジェクトのディレクトリにsrcフォルダと、その中にsassフォルダを作成。
sassフォルダにstyle.scssファイルを作成。
sassフォルダに移動。プロンプト使った方がファイル作成楽だから。
cd src cd sass
以下はファイルを作成するコマンド(Windows)。
type nul > style.scss
Macだったら
touch style.scss
試しにScssを書いてみましょう。
.wrapper { .main { h1 { font-size: 20px; } } }
これを保存しておきます。
あと、プロジェクトのディレクトリに戻るのを忘れずに
cd .. cd ..
gulp-sassをインストール
では、SassをCSSに変換してくれるパッケージをインストールします。
npm install gulp-sass --save-dev
これでgulp-sassフォルダが、node_modulesフォルダの中に入っていると思います。これでオッケーです。
以下の項目が追加されていると思います。
"devDependencies": { "gulp-sass": "^3.1.0" }
ちなみに、他のプロジェクトでまた使う時は、ここで作ったファイルを再利用すると便利。
devDependenciesにパッケージ名とバージョンが書いてあれば、
npm install
で一括インストールできます。
はい、次はgulpfile.jsファイルを新規作成して、これをいじっていきます。
'use strict'; var gulp = require('gulp'); var sass = require('gulp-sass');
最初の一行目はstrictモードを宣言。簡単に言うと文法のミスを厳しくするモード。
requireして変数に代入します。
'use strict'; var gulp = require('gulp'); var sass = require('gulp-sass'); // sassというタスクを定義していきます。 gulp.task('sass', function(){ gulp.src('./src/sass/**/*.scss') .pipe(sass({outputStyle: 'expanded'})) .pipe(gulp.dest('./deploy/css/')); });
これは、src→sass内のscssファイルをCSSにコンパイルして、deply→cssフォルダに書きだすということになります。
deployとcssフォルダは作っていませんが、こうすると自動で生成されます。
ここで、コマンドプロンプトでタスクを走らせてみましょう。
gulp sass
これで先ほど定義したsassというタスクが実行されます。
自動的にdeployフォルダとその中にcssフォルダが出来ていると思います。
それでは、コンパイルされたstyle.cssを覗いてみましょう。
.wrapper .main h1 { font-size: 20px; }
CSSに変換されています!
Sassのコンパイルを自動化
しかし、コードを書くごとにコンパイルしていては、超面倒ですね。ファイルの変更を監視させて、自動でコンパイルさせることもできます。
'use strict'; var gulp = require('gulp'); var sass = require('gulp-sass'); // sassというタスクを定義していきます。 gulp.task('sass', function(){ gulp.src('./src/sass/**/*.scss') .pipe(sass({outputStyle: 'expanded'})) .pipe(gulp.dest('./deploy/css/')); }); // watchを使うとファイルの変更を監視できます。 gulp.task('watch', function(){ gulp.watch('./src/sass/**/*.scss', ['sass']); });
これはsrcフォルダのsassフォルダ内のファイルが保存とか新規作成された時に、先ほど定義したsassというタスクを走らせるという感じです。
それでは、コマンドプロンプトで、
gulp watch
と打ってみましょう。これでsassフォルダの監視が始まりました。
試しにstyle.scssを書き換えてみましょう。
.wrapper { .main { h1 { font-size: 20px; line-height: 1.5em; } } }
これを上書き保存して、deploy→cssフォルダのstyle.cssを見てみると、
.wrapper .main h1 { font-size: 20px; line-height: 1.5em; }
自動的にコンパイルされている!!
watchを終了させるには、コマンドプロンプトで ctrl + C です。
「バッチジョブを終了しますか?」と聞かれるので、y と Enterキーで終了します。
仕上げにコマンドプロンプトで「gulp」と打っただけですべてのタスクが走るように設定しましょう。
'use strict'; var gulp = require('gulp'); var sass = require('gulp-sass'); // sassというタスクを定義していきます。 gulp.task('sass', function(){ gulp.src('./src/sass/**/*.scss') .pipe(sass({outputStyle: 'expanded'})) .pipe(gulp.dest('./deploy/css/')); }); // watchを使うとファイルの変更を監視できます。 gulp.task('watch', function(){ gulp.watch('./src/sass/**/*.scss', ['sass']); }); // defaultは「gulp」コマンドのみで動くタスクを設定します。 gulp.task('default',['sass'],function(){ gulp.start('watch'); });
これで、「gulp」コマンドを打つと、まずsassのタスクが走り、その後コールバックでwatchが始まります。
プロンプトで「gulp」と打ってみましょう。
gulp
これでsassとファイルの監視が始まりました。便利ですね。
他のパッケージとかはまた別で紹介します。
この記事の続き