タグ: gulp

今更ですが, タスクランナーgulpのメモです。初心者的な使い方しかしていません。

gulpのインストール

getting-startedをそのまま。

$ nvm use 0.12.0
Now using node v0.12.0
$ npm install --global gulp
$ vim gulpfile.js
var gulp = require('gulp');

gulp.task('default', function() {
  // place code for your default task here
});
$ gulp

gulpを使ってみた

cssはminify, jsはconcatで連結してから, uglifyで圧縮する。

'use strict';

var gulp = require('gulp'),
	sass = require('gulp-sass'),
	autoprefixer = require('gulp-autoprefixer'),
	minifyCSS = require('gulp-minify-css'),
	concat = require('gulp-concat'),
	uglify = require('gulp-uglify');

gulp.task('default', function() {
	gulp.watch('sass/**/*.scss',['sass']);
	gulp.watch('css/**/*.css',['css']);
	gulp.watch(['./static/js/**/*.js', '!./static/js/min/**/*.js'], ['js']);
});

gulp.task('sass', function() {
	return gulp.src('sass/**/*scss')
		.pipe(sass())
		.pipe(autoprefixer())
		.pipe(gulp.dest('./css'));
});

gulp.task('css', function() {
 	return gulp.src('./static/css/*.css')
		.pipe(minifyCSS({keepBreaks:true}))
		.pipe(gulp.dest('./static/css/min/'));
});

gulp.task('js', function() {
	gulp.src(['./static/js/file1.js', './static/js/file2.js', './static/js/file3.js'])
    	.pipe(concat('app.js'))
    	.pipe(gulp.dest('./static/js/'))
    	.on('end', function() {
			return gulp.src(['./static/js/**/*.js', '!./static/js/lib/**/*.js', '!./static/js/min/**/*.js'])
        		.pipe(uglify())
        		.pipe(gulp.dest('./static/js/min'));
        });
});

gulpを実行する。gulpにtaskを渡さないと, defaultのタスクが起動して監視モードになる。

$ gulp sass css js

ファイル連結後が 10kB, 圧縮後は 6.7kB となり連結前の file3.js より小さくなった。

$ ls -lh static/js/file1.js static/js/file2.js static/js/file3.js static/js/app.js 
-rw-r--r--@ 1 xxx  staff    10K  3 15 12:29 static/js/app.js
-rw-r--r--@ 1 xxx  staff   1.3K  3 14 16:56 static/js/file1.js
-rw-r--r--@ 1 xxx  staff   1.5K  3 14 17:23 static/js/file2.js
-rw-r--r--@ 1 xxx  staff   7.5K  3 14 17:17 static/js/file3.js
$ ls -lh static/js/min/app.js
-rw-r--r--@ 1 xxx  staff   6.7K  3 15 12:29 static/js/min/app.js

gulpは確かに便利でした。