Grunt→gulpに変更＋αと、はまったところ

タスクランナーとしてGruntを使っていたけど、gulpに変更しました。
ついでに、構文チェックとか色々追加中。
とりあえず、やりたいことがひと通り出来たのでよしとしよう。

パッケージの理解

・npm
　　　→node.js製。gulpやそのプラグインパッケージ管理
・bower
　　　→npmからインストール。jqueryなど、webページで使うプラグインパッケージ管理。gitを入れないとプラグインインストール出来ない。
・gem
　　　→ruby製。sassやcompassのコンパイルのため。

Grunt

行ったこと

・compassコンパイル
・Jadeコンパイル
　　jsonデータ読み込み
・pluginコピー（全て）
・watch

ソース

module.exports = function(grunt) {
    var pkg, taskName;
    pkg = grunt.file.readJSON('package.json');
    grunt.initConfig({
        //ディレクトリ設定
        dir :{
            src : 'src',
            dist : 'Webcontent',
            test : '<%= dir.src %>/test',
            doc : 'docs',
            js : 'js',
            css : 'css',
            cssCompile : '<%= dir.src %>/<%= dir.css %>.compile'
        },
        // SassとCompassをコンパイルします。
        compass: {
            dist: {
                options: {
                    basePath: '<%= dir.src %>',
                    config: '<%= dir.src %>/config.rb',
                }
            }
        },
        cssmin: {
             minify: {
                files: {
                    '<%= dir.dist %>/css/style.css': ['<%= dir.src %>/css/*.css']
                }
            }
        },
        jade: {
            options:{
                pretty: false,
                data: grunt.file.readJSON('src/json/config.json'),
            },
            source:{
                expand: true,
                cwd: '<%= dir.src %>/jade',
                src: ['**/!(_)*.jade'],
                dest: '<%= dir.dist %>',
                ext: '.html'
            }
        },
        //plugin copy
        copy: {
            js: {
                expand: true,
                cwd: '<%= dir.src %>/',
                src: ['js/**'],
                dest: '<%= dir.dist %>'
            },
            plugin: {
                expand: true,
                cwd: '<%= dir.src %>/',
                src: ['plugin/**'],
                dest: '<%= dir.dist %>'
            }
        },
        watch: {
            // Sassファイルが更新されたら、タスクを実行します。
            sass: {
                files: ['<%= dir.src %>/**/*.scss',],
                tasks: ['compass']
            },
            css: {
                files: ['<%= dir.src %>/css/*.css'],
                tasks: ['cssmin']
            },
            jade: {
                files: ['<%= dir.src %>/**/*.jade','<%= dir.src %>/**/*.json',],
                tasks: ['jade']
            },
            js: {
                files: ['<%= dir.src %>/js/**'],
                tasks: ['copy:js']
            },
            plugin: {
                files: ['<%= dir.src %>/plugin/**'],
                tasks: ['copy:plugin']
            }
        },
    });

    // GruntFile.jsに記載されているパッケージを自動読み込み
    for(taskName in pkg.devDependencies) {
        if(taskName.substring(0, 6) == 'grunt-') {
            grunt.loadNpmTasks(taskName);
        }
    }

    //grunt.registerTask('default', ['connect', 'watch:sass']);
    grunt.registerTask('default', ['watch']);

    grunt.registerTask('eatwarnings', function() {
        grunt.warn = grunt.fail.warn = function(warning) {
            grunt.log.error(warning);
        };
    });
};

gulp

行ったこと

・coffeeスクリプトコンパイル（jsからcoffeeスクリプトに変更した）
　　coffeeスクリプト文法チェック
　　release時のみ、最適化
・scss（compass）コンパイル
　　scss文法チェック
・Jadeコンパイル
　　json文法チェック
　　jsonデータ読み込み
　　release時のみ、minify
　　release時のみ、sitemap.xml作成
・画像コピー
・pluginのbowerからmainで必要な物のみコピー

ソース

gulp         = require 'gulp'
$             = require('gulp-load-plugins')()
bowerfiles  = require 'main-bower-files'
#runSeq = require 'run-sequence'

#path
$src = './src'
$WebContent = './WebContent'
mySiteUrl = 'http://sora9.web.fc2.com/'
config =
              path:
                 js: $src + '/coffee/**/*.coffee'
                 scss: $src + '/scss/**/*.scss'
                 scssSourceMap: '../../'+$src + '/scss'
                 jade: $src + '/jade/**/*.jade'
                 jadetask: $src + '/jade/**/!(_)*.jade'
                 jsondata: $src + '/json/config.json'
                 img: $src + '/img/**/*'
                 link: $src + '/link/**/*'
              outpath:
                js: $WebContent + '/js'
                css: $WebContent + '/css'
                html: $WebContent
                img: $WebContent + '/img'
                link: $WebContent + '/link'
                lib: $WebContent + '/lib'

isRelease = $.util.env.release?

gulp.task 'js', ->
  gulp
    .src config.path.js
    .pipe $.coffeelint()
    .pipe $.coffee()
#    .pipe $.jshint()
#    .pipe $.jshint.reporter 'jshint-stylish'
    .pipe $.if isRelease, $.uglify()
    .pipe gulp.dest config.outpath.js


gulp.task 'scss', ->
  gulp
    .src config.path.scss
    .pipe $.plumber()
    .pipe $.scssLint()
    .pipe $.rubySass(compass : true)
#    .pipe $.pleeease()
#    .pipe $.minifyCss()
    .pipe gulp.dest config.outpath.css

gulp.task 'json', ->
  gulp
    .src config.path.jsondata
    .pipe $.jsonlint()
    .pipe $.jsonlint.reporter()

gulp.task 'jade', ->
  gulp
    .src config.path.jadetask
    .pipe $.plumber()
    .pipe $.jade(
      data: require(config.path.jsondata)
      pretty: true
      )
#    .pipe $.htmlhint()
    .pipe $.if isRelease, $.minifyHtml()
    .pipe gulp.dest config.outpath.html
    .pipe $.if isRelease, $.sitemap(siteUrl: mySiteUrl)
    .pipe $.if isRelease, gulp.dest config.outpath.html

gulp.task 'img', ->
  gulp
    .src config.path.img
#    .pipe $.plumber()
    .pipe gulp.dest config.outpath.img

gulp.task 'link', ->
  gulp
    .src config.path.link
#    .pipe $.plumber()
    .pipe gulp.dest config.outpath.link

gulp.task 'bower', ->
  gulp.src bowerfiles()
#    .pipe $.if '*.js', $.concat('vender.js')
    .pipe $.if '*.js', $.uglify(preserveComments: 'some')
    .pipe $.if '*.css', $.concat('vender.css')
    .pipe gulp.dest config.outpath.lib


gulp.task 'watch', ->
  gulp.watch config.path.js, ['js']
  gulp.watch config.path.scss, ['scss']
  gulp.watch [config.path.jsondata], ['json','jade']
  gulp.watch [config.path.jade], ['jade']
  gulp.watch config.path.img, ['img']
  gulp.watch config.path.link, ['link']


gulp.task 'default', ['watch']
gulp.task 'build', [
  'bower',
  'js',
  'scss',
  'json',
  'jade',
  'img',
  'link',
]

◎エラーなど、はまったこと

・cssの文字コード指定

sassの文法チェックを入れたところ、「prefer single quoted strings」と言われたので、
先頭の文字コード指定『@charset "utf-8";』をシングルクォートにしたら、「invalid windows-31j character」と言われて、コンパイル出来なくなった。
しかも、複数ファイルだったが、文字コードがそれぞれ異なったので、特定が難しく、以下の記述に辿り着き、ダブルクォートに戻したら、うまく行った。
初めの文法チェックによるwarningは無視することに。


http://frmmpgit.blog.fc2.com/blog-entry-33.html

次に作成する*.sassファイルの先頭に『@charset "utf-8";』と指定するとソースファイルをUTF-8としてコンパイルするようになる。ダブルクォートで囲むことに注意。

最初シングルクォートで'utf-8'としていたが次のようなエラーが出てコンパイルに失敗していた。

・release時のみの動作

参考サイトにて、「$.if isRelease」と書いたら、「--release」オプションを指定してgulpを実行した時のみ、動作が実行される。とあったのだが、
「isRelease is not defined」と怒られる。
よくよく参考コードを見ると、以下の宣言が抜けていました。

isRelease = $.util.env.release?

---

参考：

Bowerまとめ（概要・導入・コマンド一覧）
俺のgulpfileなど
gulp.js その4 プラグイン一覧
Gulpでウェブアプリ作る際のスケルトン
gulp.jsでWeb開発環境をつくる