今更ながらWindows環境でgulpを試してみた

JavaScript CSS Node.js

cssやjsのminifyをするために今更ながらgulpを試してみたのでメモ

目標

gulpを使ってcssとjsをminifyする

環境

Windows10 Pro 64bit

順番

  • node.jsのインストール
  • npmで必要パッケージのインストール
    • gulp
    • gulp-clean-css
    • gulp-uglify
    • gulp-strip-debug
    • gulp-sourcemap
  • gulpfile.jsを書く

参考にしたサイト

初めてのGulp!実戦投入まで！ - Qiita
Gulp.js入門 - コーディングを10倍速くする環境を作る方法まとめ | 東京上野のWeb制作会社LIG

node.jsのインストール

npmを使うにはnode.jsをインストール必要があるのでダウンロード | Node.jsからWindows Installer版をダウンロードしてインストールする
ダウンロードした .msi ファイルをダブルクリックで開いて Next 連打で問題なかった

npmで必要パッケージのインストール

gulpでcssとjsをminifyするのに必要なパッケージをインストールしていく
gulp自体はグローバルにインストールしてそれ以外はプロジェクトの中にインストールする方針
グローバルにインストールするには -g をつけて npm install する
プロジェクトの中にインストールするにはプロジェクトのトップディレクトリで npm install を実行する

下準備として package.json を作る必要があるので、プロジェクトのディレクトリに移動して npm init する

cd project_dir
npm init
#色々質問されるがそのままエンター押していけば大丈夫
gulp
npm install -g gulp
gulp-clean-css

cssをminify化するためのパッケージ

npm install --save-dev gulp-clean-css
gulp-uglify

jsをminify化するためのパッケージ

npm install --save-dev gulp-uglify
gulp-strip-debug

console.logを削除するパッケージ

npm install --save-dev gulp-strip-debug
gulp-sourcemap

chromeなどの開発環境でminify化されたものを見やするためにmapファイルを作るパッケージ

npm install --save-dev gulp-sourcemap

gulpfile.jsを書く

gulpコマンドでminify化するための処理を書く
書く場所はプロジェクトのトップに gulpfie.js というファイルを作ってそこに書く

ディレクトリ構成は編集する元ファイルを source/js source/css に置いておき、minify化したファイルを dist/js dist/css に置くようにする

// 使用するパッケージを require で読み込む
var gulp = require('gulp');
var uglify = require('gulp-uglify');
var cleanCSS = require('gulp-clean-css');
var sourcemaps = require("gulp-sourcemaps");
var stripDebug = require("gulp-strip-debug");

// js圧縮
gulp.task('minify-js', function() {
    return gulp.src("source/js/*.js")
        .pipe(stripDebug()) // console.logを削除
        .pipe(sourcemaps.init()) // mapファイル作成のための初期化処理
        .pipe(uglify()) // jsのminify化
        .pipe(sourcemaps.write('./')) // mapファイルの作成
        .pipe(gulp.dest('dist/js/')); // 出来たファイルをコピーする
});

// css圧縮
gulp.task('minify-css', function() {
    return gulp.src("source/css/*.css")
        .pipe(sourcemaps.init()) // mapファイル作成のための初期化処理
        .pipe(cleanCSS()) // cssのminify化
        .pipe(sourcemaps.write('./')) // mapファイルの作成
        .pipe(gulp.dest('dist/css/')); // 出来たファイルをコピーする
});

// デフォルトの処理
gulp.task('default',['minify-css', 'minify-js']);

gulp.task('タスク名', function(){〜〜〜}) のタスク名の部分は gulp コマンドの引数として実行時に渡す文字列を入れておく
defaultは引数なしで実行した場合に処理される、上記ではcssとjsのminify化のタスク名を指定してデフォルトでは全てのminify化を行うようにしている

#jsのminifyを行うとき
gulp minify-js

#cssのminifyを行うとき
gulp minify-css

#デフォルト jsとcssのminifyを行う
gulp

備考

触ってみるまではnode.js入れたり、npmで色々パッケージを入れたり、gulpfile.jsを書いたりと手順が多く見えて面倒に感じていたけれど、順番に一つずつやってみるとそれほど大変そうではなかった
ほぼ参考ページのコピペで済ませたというのも最初の導入としては良かった

上記のminify化以外にもgulpを使って以下のようなことも出来るようだ

  • HTMLのvalidation
  • JSのvalidation
  • CSSやJSを一つのファイルにまとめる
  • gulp.watch を使って監視対象のファイルが更新されたら処理を実行する
    • ブラウザのリロードを走らせる
    • 更新されたファイルをサーバにアップする

ざっと調べているうちに最近ではgulpやGruntに頼らずにnode-scriptsでやってしまおうという動きもあるようだが、調べた中では自分としてはgulpの方がとりあえずの障壁が低かった