最近使ってるgulpfile.jsの設定はこんな感じです

Web制作のありとあらゆる処理を自動化してくれるgulpの最近の設定を書いてみました。

そもそもgulpって?

gulpはいわゆるタスクランナーです。あらゆる処理を自動化してくれます。
例えばscssファイルをコンパイルしたり、コンパイルしてできたcssファイルを圧縮してくれたり、画像ファイル一式を圧縮してくれたり、jsファイルを圧縮してくれたり、ftpにアップロードしてくれたり、gitでcommit&pushしてくれたり、cssやjsのドキュメントを作成してくれたり、html/php/js/scssあたりが更新されたらブラウザのリロードをやってくれたり…数え上げたらキリがありません。一度使い始めるともう手放せません。

gulpのインストール

そもそもgulpをインストールしていない人は何も考えないでQiitaの記事に上げたシェルスクリプトをダウンロードしてきて実行してください。とりあえず全部インストールできます。

gulpfile.js

JavaScriptがある程度わかってると理解するのは簡単だと思います。
gulpはgulpfile.jsというファイルでプラグインを読み込んでタスクを登録しますが、ここでは最近使ってるgulpfile.jsを載せておきます。

//------------------------------------------------------------------------------------------
//
// gulpfile.js
//
// References:
// https://markgoodyear.com/2014/01/getting-started-with-gulp/
// http://liginc.co.jp/web/tutorial/117900#sec08
//
//------------------------------------------------------------------------------------------
 
//--------------------------------------------------
// 以下の設定ではexample.comにftp接続して、
// 接続先の/piblic_html/ディレクトリに
// ファイルをアップロードします。
// ftp接続先、ユーザ名、パスワード、リモートディレクトリ、
// アップロードするファイル群を適宜書き換えてください。
//--------------------------------------------------
 
var is_HTML_file = true; // index.htmlならtrueを、index.phpならfalseを指定してください。
 
var index_file_name = ( is_HTML_file )? 'index.html': 'index.php';
 
var ftp_host_name        = 'example.com';
var ftp_user_name        = 'ftp@example.com';
var ftp_password         = 'hogehoge';
var ftp_remote_directory = '/public_html/';
var ftp_upload_files     = [ // 必要であれば書き加えてください
                             'scss/**',
                             'css/**',
                             'js/**',
                             'images/**',
                             'gulpfile.js',
                             index_file_name
                           ];
var browserReloadProxy  = 'localhost/hogehoge/'; // httpd-vhosts.confのServerNameです。サブディレクトリ以下はスラッシュで続けてください。
 
var gulp = require( 'gulp' );
 
// sass: preprocessor for css
var sass = require( 'gulp-sass' );
 
// minify-css: minify css files
var minifycss = require( 'gulp-minify-css' );
 
// compass: enable compiling compass files
// var compass = require( 'gulp-ruby-sass' );
// var compass = require( 'gulp-compass' );
 
// uglify: minify JavaScript files
var uglify = require( 'gulp-uglify' );
 
// rename: file handling
var rename = require( 'gulp-rename' );
 
// concat: file handling
var concat = require( 'gulp-concat' );
 
// browser-sync: live reload environment
var browserSync = require( 'browser-sync' ).create();
 
// plumber: error handling (do not stop watching when errors are thrown)
var plumber = require( 'gulp-plumber' );
 
// imagemin: compress image files
var imagemin = require( 'gulp-imagemin' );
 
// imageminPngquant: compress image files
var imageminPngquant = require('imagemin-pngquant');
 
// notify: show notification
var notify = require( 'gulp-notify' );
 
// vinyl-ftp: deployment
var gutil = require( 'gulp-util' );
var ftp = require( 'vinyl-ftp' );
 
// git: version control
var git = require( 'gulp-git' );
 
// stylestats: show the score of your css files
var stylestats = require( 'gulp-stylestats' );
 
// htmlv: html validator
var htmlv = require( 'gulp-html-validator' );
 
// sassdoc: styleguide generator
var sassdoc = require( 'sassdoc' );
 
// yuidoc: YUI JavaScript Documentation Tool
var yuidoc = require( 'gulp-yuidoc' );
 
// var jshint = require('gulp-jshint');
// var cache = require('gulp-cache');
// var del = require('del');
 
// task for live-reload
gulp.task( 'browser-sync', function() {
  browserSync.init({
//    server: {
//      baseDir: './',
//      index  : 'index.php'  // index file
//    }
    proxy: {
      target: browserReloadProxy,
      index: 'index.php'
    }
  });
});
 
// browser reload
gulp.task( 'bs-reload', function () {
  browserSync.reload();
});
 
// task for php
gulp.task( 'index', function() {
  gulp.src( index_file_name )
  .pipe( browserSync.reload( { stream: true } ) );
});
 
// task for styles
gulp.task( 'styles', function() {
  gulp.src( 'scss/*.scss' )
  .pipe( plumber( { errorHandler: notify.onError('<%= error.message %>') } ) )
.pipe( sass() )
//   .pipe( sass( { style: 'compressed' } ) )
//   .pipe( compass({
//     config_file: 'config.rb',
//     comments: false,
//     css: 'css/',
//     sass: 'scss/'
//   }) )
  .pipe( minifycss() )
  .pipe( gulp.dest( './css' ) )
  .pipe( browserSync.reload( { stream: true } ) );
});
 
// task for scripts
gulp.task( 'scripts', function() {
  gulp.src( [ 'js/*.js', '!js/*.min.js' ] )
  .pipe( plumber( { errorHandler: notify.onError('<%= error.message %>') } ) )
  .pipe( uglify() )
  .pipe( rename( { extname: '.min.js' } ) )
  .pipe( gulp.dest( './js' ) )
  .pipe( browserSync.reload( { stream: true } ) );
});
 
// task for image compression
gulp.task( 'images', function () {
  return gulp.src( 'resources/images/**/*' )
  .pipe( imageminPngquant( { quality: '65-80', speed: 1 } )())
  .pipe( gulp.dest( 'images' ) );
});
 
// task for deploy
gulp.task( 'deploy', function() {
 
  var conn = ftp.create( {
    host: ftp_host_name,
    user: ftp_user_name,
    password: ftp_password,
    parallel: 7,
    log: gutil.log
  });
  // using base = '.' will transfer everything to /public_html correctly
  // turn off buffering in gulp.src for best performance
  return gulp.src( ftp_upload_files, { base: '.', buffer: false } )
  .pipe( conn.newer( ftp_remote_directory ) ) // only upload newer files
  .pipe( conn.dest( ftp_remote_directory ) );
  exit;
});
 
// get stylesheed statistics
// @see  https://html5experts.jp/t32k/5743/
gulp.task( 'stats', function () {
  gulp.src( './css/*.css' )
  .pipe( stylestats({
//    type: 'json',
//    outfile: true
  }) )
  .pipe( gulp.dest( './stats/' ) );
});
 
// html validation
gulp.task( 'valid', function () {
  gulp.src( './index.html' )
//  .pipe( htmlv( { format: 'html'} ) )
  .pipe( htmlv() )
  .pipe( gulp.dest( './validation') );
});
 
// task for documentation
gulp.task( 'doc', function() {
  // task for sassdoc
  gulp.src( 'scss/*.scss' )
  .pipe( plumber( { errorHandler: notify.onError('<%= error.message %>') } ) )
  .pipe( sassdoc() )
  // task for YUI doc
  gulp.src( [ 'js/*.js', '!js/*.min.js' ] )
  .pipe( plumber( { errorHandler: notify.onError('<%= error.message %>') } ) )
  .pipe( yuidoc.parser() )
  .pipe( yuidoc.reporter() )
  .pipe( yuidoc.generator() )
  .pipe( gulp.dest( './documentation-output' ) )
});
 
// Default task
gulp.task( 'default', ['browser-sync'], function() {
 
  gulp.start( 'index', 'styles', 'scripts' );
 
  // Watch index.* files
  gulp.watch( index_file_name, [ 'index' ] );
 
  // Watch .scss files
  gulp.watch( 'scss/*.scss', [ 'styles' ] );
 
  // Watch .js files
  gulp.watch( [ 'js/*.js', '!js/*.min.js' ], [ 'scripts' ] );
 
});