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開発環境をつくる

ホームページ（のソース）を更新したよ

8/16に、ホームページのソースを更新しました。
コンテンツ的には変わりはないのですが＾＾；

以下、変更点をまとめます。

分類	項目	旧	新	+α
構成	html	html	jade
	コンテンツ情報	html	json
	テンプレート	html+javascript	jade
デザイン	css	css	sass, compass
	フレームワーク （レスポンシブデザイン）	非対応	Foundation	→追加調整(*1)
	フレームワーク （デザイン）	css	（Foundation）	bootstrap
	ファイル分割	コンテンツの種類単位	SMACSS（風）
	jquery	jquery1.x	jquery2.x
	lightbox	prettyPhoto	fancybox
自動化		-	grunt	gulp

+αは、試してみたいもの。

jadeは大活躍。
htmlのテンプレート化と、
コンテンツはjsonで設定したものを読み込んで、mixinなどで展開
これで、共通メニューとかコンテンツ追加とか楽になった。
アクセス解析などの部品や、構成要素を分割して、includeすることで、管理もしやすくなった。


cssは、sass,Foundationなど利用してみたが、活用しきっていない感。
レスポンシブデザインのデザインを利用したけど、デフォルトのサンプルを利用したからか、スマホから見ると自動でスマホの幅にならないなど、追加調整が必要みたい。(*1)
メニューやボタンなどのデザインも利用してみたいけど、基本設定できていない。デフォルトのまま。これはbootstrapのデザインも使ってみたいな。
jadeは、mixinとか機能を活躍していたけど、sassは、変数とかmixinとかの機能を全然活用していないので、もっと活用して作れるようにしたい。

ファイル分割は、SMACSSを参考にしたので、楽になったかな？
sassはあまり書いていないので、_imports.scssぐらいしか頻繁に更新しなかったけど＾＾；


ちなみに、イラスト表示のlightbox表示は、以前使用していたのがjquery2系に対応していなかったので、変更しました。今度のは、マウスホイールに対応していたり、サムネイル表示に対応したりと、いろいろ良い。
でも、こちらも、スマホなどで見るのは厳しいので、モバイルでの表示方法変更など考えないといけないですね。


jade, sassなどを利用したので自動コンパイルは、gruntを利用しました。
必要最低限の、ファイル監視、コンパイル、コピーぐらいしか利用してないです。
最適化とかも利用したほうが良いかな。。
こちらも、gulpも気になっている。


と、いろいろ書いているのですが、
イラストなど展示だけなら、コンテンツ追加が簡単なのは、ブログとかtumblr利用するとかなんでしょうね。昔、少し検討もしてました。
なので、もはや、上記のような技術を使ってのwebページ作成の実験という意味合いも強いかもしれません。



（追記 *1）
viewportの設定してなかっただけでした。

<meta name="viewport" content="width=device-width, initial-scale=1">

---

参考
Jadeについて
10分でわかるjadeテンプレートエンジン

HUNTER×HUNTER 32

HUNTER×HUNTER 32 (ジャンプコミックス)

あい。

アルカと、会長選挙解決

自分のTODO

やりたいことが溜まってきたので、宣言する意味も込めてここにTODO記載。
春だしね。


ワンダと巨像　→終わった9/11
3DSのポケモン
風ノ旅ビトとか聖剣とかもう一回　→終わった9/11
借りたマンガ読むkindleさんも →終わった4/29
デザインパターン本読む　→途中4/29
英語版ハリーポッター２冊買ってずっと読んでないの読む
レジンアクセサリー
部屋の整理として、本を自炊で取り込み　→一部4/29　→第一弾は終わった
（順不同）

web系やりたいことメモ。

新たにお勉強環境構築中。

sublime text導入
github連携
　　→間接だけど済

以下の物を使って、自分用テンプレートを作成してお勉強。
　sass
　compass
　　　→ここまで、済(2/8)
　Foundation
　grunt
　　→ここまで、済(2/26)
　bootstrap

　SMACSS

---

参考：

• Sass+compassをEclipse環境にインストール
• 「Sublime Text」のみでCompassとSass（Scss）を使えるようセッティングしてみたのでその手順と参考にした記事まとめ
• SMACSS and Rails A Styleguide for the Asset Pipeline
• メンテナンス性の高いCSSを書く - 読書 - Scalable and modular Architecture for CSS 日本語版