【Gulp.jsインストール】フロントエンドタスクランナーGulp.jsの使い方
こんにちわ。山王です。
最近話題になってるフロントエンドタスクランナーGulp.jsをインストールしたお話です。
以前Grunt.jsを使用した際はCompassのコンパイルが遅くて断念したんですが
やはりナウでヤングでモダンなやり方でやりたいなぁと思いGulp.jsの噂を聞きつけインストールした次第です。
Gruntとの違い
- Gruntfile.jsに比べgulpfile.jsの方が書きやすい
- 実行速度が速い
- プラグインが少ない
まだできて日が浅いので今後プラグインも増えてくるのではないでしょうか。
フロントエンドツールのトレンドの流れが早いので新しくもっといいツールが出る可能性もありますが。
目次
- Node.jsインストール
- Gulp.jsインストール
- gulpfile.js作成
- CompassでSASSのコンパイルをする
- CSSを圧縮する
- Javascriptを圧縮する
- 画像の最適化をする
- ファイルの変更時にブラウザをオートリロード
- おわりに
Node.jsをインストール
公式サイトからインストールします。
僕はインストーラーでインストールしました。
インストールのやり方はいくつかありますがインストーラーが一番簡単です。
インストールが完了したら
node -v npm -v
バージョン番号が表示されればインストール完了です。
Gulp.jsをインストール
お好きな場所にディレクトリを作成します。
mkdir gulp_test cd gulp_test npm init
質問が続きますのでエンターでおｋです。
終わったらpackage.jsonが作成されます。
npmコマンドでグローバルにインストールします。コマンドラインで以下を入力
npm install -g gulp
ローカルにもインストールします。
npm install gulp --save-dev
バージョンが表示されれば完了です。
gulpfile.jsの作成
Gulpの設定を行っていきます。
gulpfile.jsを作成し下記を記述します。
var gulp = require('gulp');
CompassでSASSのコンパイルをする
もしsass、compassがインストールされてなければインストールしてください。
gem install sass gem install compass
インストールできたらプラグインをインストールします。
npm install gulp-compass --save-dev
インストールができたら、gulpfile.jsにタスクを記述していきます。
var gulp = require('gulp');
var compass = require('gulp-compass');
var plumber = require('gulp-plumber'); //plumberインストールし追記
//Compassのタスク
gulp.task('compass',function(){
gulp.src(['common/sass/*.scss'])
.pipe(plumber())//plumberインストールし追記
.pipe(compass({
config_file : 'config.rb',
comments : false,
css : 'common/css',
sass: 'common/sass/'
}));
});
gulp.task("default", function() {
gulp.watch("common/sass/*.scss",["compass"]);
});
gulp.task(‘タスク名’,function() {});でタスクの登録をおこないます。
gulp.src(’ファイル’のパス)で読み出したいファイルを指定します。
pipe(行いたい処理)でsrcで取得したファイルに処理を施します
gulp.dest(“出力先”)で出力先に処理を施したファイルを出力します。
僕はconfig.rbの設定を使用するので上記のような記述になります。
config_file、css、sassの箇所に任意のパスを記述してください。
gulpfile.jsを保存しタスクを実行しましょう。
以下のコマンドを実行します。
gulp
デフォルトのタスクに入れているのでgulpだけでおｋです。
これでsassのコンパイルが出来ました。
しかしこのままだとエラーが出ると監視が止まってしまいます。
エラーの度に実行し直すのは面倒なのでプラグインを入れて監視を実行させます。
npm install gulp-plumber --save-dev
タスク実行前に.pipe(plumber())を記述します。
CSSを圧縮する
次はコンパイルしたcssを圧縮したいと思います。
compassと同じようにnpmコマンドでインストールします。
npm install gulp-csso --save-dev
またgulpfile.jsにタスクを追記していきます。
var csso = require('gulp-csso');
//CSSのタスク
gulp.task('css', function() {
return gulp.src('common/css/*.css')
.pipe(csso())
.pipe(gulp.dest('common/css/'))
});
gulp.task("default", function() {
gulp.watch("common/css/*.css",["css"]);
});
これでコンパイルと同時にcssの圧縮をしてくれます。
Javascriptを圧縮する
CSSを圧縮したらJavascriptも圧縮したいですよね。
やりましょう。
npm install gulp-uglify --save-dev
var uglify = require("gulp-uglify");
//Javascriptのタスク
gulp.task("js", function() {
gulp.src(["common/js/*.js"])
.pipe(plumber())
.pipe(uglify())
.pipe(gulp.dest("common/js/min"))
.pipe(browser.reload({stream:true}))
});
gulp.task("default", function() {
gulp.watch(["common/js/*.js"],["js"]);
});
これで保存と同時にjsファイルも圧縮されます。
画像の最適化をする
CSS、JSを圧縮したら画像も圧縮したくなりますよね。
npm install gulp-imagemin --save-dev
しかし僕の環境だとnpmのバージョンが古くて最新版がインストールできませんでした。
npmのバージョンアップも行ったんですがうまくいかなかったので渋々古いバージョン入れました。
npm install パッケージ名@x.x.x
ちなみにバージョン指定でインストールするには上記の様にしてください。
続いて画像最適化のタスクを記述します。
var imagemin = require("gulp-imagemin");
var paths = {
commonDir : 'img/',
miniDir : 'img_min/'
}
//画像最適化のタスク
gulp.task( 'imagemin', function(){
var srcGlob = paths.commonDir + '/**/*.+(jpg|jpeg|png|gif|svg)';
var dstGlob = paths.miniDir;
var imageminOptions = {
optimizationLevel: 7
};
gulp.src( srcGlob )
.pipe(imagemin( imageminOptions ))
.pipe(gulp.dest( dstGlob ));
});
こちらも環境に合わせてパスを変更してください。
画像の最適化は変更時ではなく最後にしたいのでデフォルトのタスクに入れません。
最適化したいときに
gulp imagemin
と入力すると画像の最適化を行ってくれます。
ファイルの変更時にブラウザをオートリロード
変更時に毎回ブラウザをリロードするのは面倒なので自動で更新するようにしましょう。
npm install browser-sync --save-dev
var browser = require("browser-sync");
//オートリロードのタスク
gulp.task("server", function() {
browser({
notify: false,
server: {
baseDir: "./"
}
});
});
//HTMLのタスク
gulp.task('html', function() {
return gulp.src('**/*.html')
.pipe(browser.reload({stream:true}))
});
HTMLファイルの監視もしたいのでhtmlのタスクも追加します。
JavascriptとCSSのタスクにも
.pipe(browser.reload({stream:true}))
これで各ファイルの変更時にブラウザがリロードします。
おわりに
本日作成したgulpfile.jsです。
var gulp = require('gulp');
var compass = require('gulp-compass');
var plumber = require('gulp-plumber');
var uglify = require("gulp-uglify");
var csso = require('gulp-csso');
var browser = require("browser-sync");
var imagemin = require("gulp-imagemin");
var paths = {
commonDir : 'img/',
miniDir : 'img_min/'
}
//画像最適化のタスク
gulp.task( 'imagemin', function(){
var srcGlob = paths.commonDir + '/**/*.+(jpg|jpeg|png|gif|svg)';
var dstGlob = paths.miniDir;
var imageminOptions = {
optimizationLevel: 7
};
gulp.src( srcGlob )
.pipe(imagemin( imageminOptions ))
.pipe(gulp.dest( dstGlob ));
});
//オートリロードのタスク
gulp.task("server", function() {
browser({
notify: false,
server: {
baseDir: "./"
}
});
});
//Compassのタスク
gulp.task('compass',function(){
gulp.src(['common/sass/*.scss'])
.pipe(plumber())
.pipe(compass({ //コンパイルする処理
config_file : 'config.rb',
comments : false,
css : 'common/css',
sass: 'common/sass/'
}));
});
//Javascriptのタスク
gulp.task("js", function() {
gulp.src(["common/js/*.js"])
.pipe(plumber())
.pipe(uglify())
.pipe(gulp.dest("common/js/min"))
.pipe(browser.reload({stream:true}))
});
//CSSのタスク
gulp.task('css', function() {
return gulp.src('common/css/*.css')
.pipe(csso())
.pipe(gulp.dest('common/css/'))
.pipe(browser.reload({stream:true}))
});
//HTMLのタスク
gulp.task('html', function() {
return gulp.src('**/*.html')
.pipe(browser.reload({stream:true}))
});
gulp.task("default",['server'], function() {
gulp.watch(["common/js/*.js"],["js"]);
gulp.watch("common/sass/*.scss",["compass"]);
gulp.watch("common/css/*.css",["css"]);
gulp.watch(['**/*.html'],["html"]);
});
僕はGruntよりGulpの方が分かりやすくていいなと思いました。
あと早いです！！
効率化を図るためにもみなさん是非使ってみてください！
