gulp

JS製ビルドツール

Install

事前にnode.jsのインストールが必要

npm install -g gulp

用途

コマンドラインで、JSやCSSの圧縮難読化、coffeeやsassからの変換、画像の圧縮、ファイルの結合、文法チェック、各種入力出力を一括で行うことができる

同一のヘッダーやパーツを持った複数の静的webページを一括出力することもできる

gulpfile

var gulp = require('gulp');

gulp.task('hoge', function() {
    console.log('HelloWorld!');
});

gulp.task('jsmin', function() {
  return gulp.src('src/js/*.js')
    .pipe(minify())
    .pipe(gulp.dest('/build/js'));
});

gulp.task('copy-html', function () {
    return gulp.src('src/html/*.html')
        .pipe(gulp.dest('build/html/'));
});

gulp.task('default', ['hoge', 'copy-html']);

Gruntとの違い

gruntfileと比べて、gulpfileは処理をpipeでつなげるため記述量が短くなる

環境変数Pathとバージョンの確認

echo %path%

C:\tools\python\Scripts;C:\Program
Files (x86)\Git\bin\;C:\Users\---\AppData\Roaming\npm;

where gulp | clip

C:\Users\---\AppData\Roaming\npm\gulp
C:\Users\---\AppData\Roaming\npm\gulp.cmd

c:\>git --version
git version 1.9.5.msysgit.0

c:\>node -v
v0.10.26

c:\>npm -v
1.4.3

c:\>gulp -v
[11:06:43] CLI version 3.8.1
[11:06:43] Local version undefined

モジュールや gulpfile.jsの記述例

var gulp = require('gulp');
var connect = require('gulp-connect');
var minify = require('gulp-minify');
var concat = require('gulp-concat');
var coffee = require('gulp-coffee');
var sass = require('gulp-sass');
var watch = require('gulp-watch');

var spritesmith = require('gulp.spritesmith');



gulp.task('hoge', function() {
    console.log('HelloWorld!');
});

gulp.task('jsmin', function() {
  //return gulp.src('src/js/*.js')
  return gulp.src(['src/js/_header.js','src/js/common.js', 'src/js/script.js','src/js/_footer.js',])
    .pipe(concat('all.js'))
    .pipe(minify())
    .pipe(gulp.dest('build/js'));
});


gulp.task('c-cof', ['compile-coffee']);
gulp.task('compile-coffee', function() {
  //return gulp.src('src/js/*.js')
  return gulp.src('src/coffee/*.coffee')
    .pipe(coffee())
    .pipe(gulp.dest('build/js'));
});


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


gulp.task('copy-html', function () {
  return gulp.src('src/html/*.html')
      .pipe(gulp.dest('build/html/'));
});



gulp.task('sprite', function () {
  var spriteData = gulp.src('src/img/buttons/*.png').pipe(spritesmith({
    imgName: 'sprite.png',
    cssName: 'sprite.css',
    imgPath : '../img/buttons/sprite.png',
    cssVarMap: function (sprite) {
        sprite.name = sprite.name.replace('@2x','');
        sprite.name = 'sprite-' + sprite.name;
      }
    }));
  spriteData.img.pipe(gulp.dest('build/img/buttons/'));
  spriteData.css.pipe(gulp.dest('build/css/'));
});




gulp.task('watch', function() {
  gulp.watch (['src/js/*.js', 'src/coffee/*.coffee'], ['jsmin', 'compile-coffee']);
});

gulp.task('webserver', function() {
  connect.server();//localhost:8080
});




gulp.task('default', ['hoge', 'jsmin', 'copy-html', 'sprite', 'webserver']);

資料

実用例

Google