1,922 views

この記事は最終更新から 2219日 が経過しています。

1. やりたいこと

cssファイルの更新を監視し、自動的に cssファイルを minifyしたい。

2. やってみる！

下記の方法2, 方法3では Node.jsを使うため、事前に Node.jsをインストールしておく。
参考： (76) Node.jsをインストールして使ってみる。

# yum -y install nodejs

※私の環境は CentOS7 だが、Windows用の Node.jsも公開されている。

(1) 方法１：Shell Scriptで実現

ToDo: 後で書く。

(2) 方法２：cleancssコマンドで実現

ローカルな作業環境に移動し Node.jsのパッケージ管理を初期化する。

$ npm init

cleancssコマンドをインストールする。

# npm install -D clean-css-cli

実行！

$ cleancss style.css

これだと標準出力に表示されるだけなので、出力ファイルを指定する。

$ cleancss -o style2.css style.css

(3) 方法３：【本命】「gulpで変化検知して自動変換」で実現

ローカルな作業環境に移動し Node.jsのパッケージ管理を初期化する。

$ npm init

gulp, gulp-clean-cssをインストールする。

$ npm install -g gulp
$ npm install -D gulp
$ npm install -D gulp-clean-css

gulpfile.js を書く。
ファイルの変化検出は gulp.watch( 監視対象, 検出後実行タスク ) で実現する。
ここでは dirIn に置かれた cssファイルを監視し、dirOut に変換後ファイルを出力するように書いた。
タスク名 minify-css, watch は何でもよい。
gulp.src()の引数には glob() のオプションを指定する。

var gulp = require('gulp');
var cleanCSS = require('gulp-clean-css');

gulp.task('minify-css', function() {
    gulp.src("dirIn/*.css")
        .pipe(cleanCSS())
        .pipe(gulp.dest('dirOut'));
});
gulp.task('watch', function() {
    gulp.watch("dirIn/*.css",['minify-css']);
});

実行！

gulp watch

dirInに非圧縮の cssファイルを置くと、自動的に処理されて dirOutに出力されるようになった！

改良１：gulp起動時に必ず一度タスクを実行させたい場合

起動時に必ず１回タスクを実行したい場合は、以下のようにタスクを指定する。
「,」で区切って複数のタスクを並べて書くこともできる。

gulp.task('watch', ['minify-css'], function() {

改良２：dirInディレクトリ配下を再帰的に処理したい場合

入力指定を「**」と書くと再帰的に処理してくれる。
素晴らしいことに、dirOut配下には入力側と全く同じディレクトリ構成で出力してくれる！

    gulp.src("dirIn/**/*.css")

    gulp.watch("dirIn/**/*.css",['minify-css']);

x. 参考

ありがとうございます。 m(_ _)m
http://gihyo.jp/dev/serial/01/nodejs
https://nodejs.org/en/docs/
https://qiita.com/miiitaka/items/32836ec7a00e88600de2
http://neos21.hatenablog.com/entry/2017/01/31/000000
https://www.takedajs.com/entry/2016/11/23/115457
https://tips4life.me/gulp-minify
https://whiskers.nukos.kitchen/2014/12/03/gulp-watch.html

---