開発環境っぽいもの

いろいろ勉強して、webページ作るのに試したツール群をまとめてみる。
分類を細かめ。ツールじゃなくて、考え方も入ってるかも。
太字は、まだ触っていないので試してみたいもの。
最後は、使えたら使ってみたいけど使いどころが見つかってないとかの、ツール名のメモ。

---

プロジェクト管理…redmine

CI ツール…Jenkins
エディタ…sublime text, atom
タスクランナー…gulp

バージョン管理…git
パッケージ管理…npm
フロントパッケージ管理…bower
モジュール管理…Webpack

javascript開発フレームワーク…Angularjs, react, flux
開発言語…coffeescript, typescript ECMAScript 6

CSSメタ言語…sass
CSSフレームワーク…bootstrap
CSS設計パターン…MCSS, SMACSS
スタイルガイド…StyleDocco

htmlメタ言語…Jade

単体テストフレームワーク…jasmine
テストランナー…karma
テスト仮想実行環境ブラウザ…(phantomJS)
E2Eテストフレームワーク…protractor, (selenium)

サーバー環境構築…chef
chefのcookbook依存性管理…Berkshelf
サーバーテスト…serverspec
仮想環境構築…vagrant, Docker
仮想マシン…VirtualBox
仮想ディスプレイ…xvfb
サーバーOS…ubuntu

ログ収集ツール…fluentd

---

監視…zabbix ビルドツール…gradle
コードレビュー…gerrit

vagrant, chefメモ

Jenkinsを実行しようとしたときに、ローカルユーザーとJenkinsユーザーで、グローバルに入れてたツールが権限で読めなかったりしました。
アプリだけじゃなく、実行する環境を文書化して、自動構築できるようにしておくことも重要だと感じ、勉強し試してみました。
なお、vagrantは基本をドットインストールで勉強、http://dotinstall.com/lessons/basic_vagrant
chef, berkshelfは、qiitaで見ました。
では、その時にあった問題メモを以下に記載します。

1. windowsで、gitデータでの実行を確認

windows側でもう一度実行しようとしたら、古くなっていたのか、npm installからは動かなくなっていたので、nodejsのバージョンアップからやり直し。

npm updateで、パッケージもバージョンアップ。

2.vagrant, chefの準備

vagrant plugin install vagrant-berkshelf

が、開発をやめるので、あまり使わない方がよいとあったが、その後、pluginを作り直したそうなので、普通に使える。

http://qiita.com/DQNEO/items/b8d2c2d88189812d6e68

chefDKを、vagrant側に入れようとしたけど、設定ファイルですぐに出来なかったので、windows側に入れることにした。

vagrant側は、plugin(vagrant-omnibus, vagrant-berkshelf)で入れる。

3.vagrantを起動して、必要なツールインストールを記述する。

bundle installのために、bundler追加

npm install -g bowerのために、git追加

npm install -g は、権限のため、sudo

npm installのとき、rebuildしているらしく、g++が必要。

apt install g++ で、入れることができた。

レシピを探すが、単独はないので、build-essentialを入れる。

sudoが必要。

vagrantの共有フォルダは、シンボリックリンクが作れないのでnpm installで、エラーとなる。

npm install --no-bin-linksで、エラーはなくなるが、実行時エラーとなるので、共有フォルダではなく、homeで実行する。

nodejsのバージョンが、最新ではないみたいで、warningが出てる。 → 

nodejs最新->5.x

http://qiita.com/notsunohito/items/eb719b3206981159cc05

https://github.com/nodesource/distributions

gemfile → Gemfile

jadeファイルのパス表記が、windows→linuxで、\→/

npm install -g で必要なものは、defaultレシピで、shellで実行。

jade, coffee-scriptは、グローバルインストールは不要。(--save-devで入れてたみたい)

4.gulp test

ここで、gulp lint, gulp buildは、実行可能となる。

のこりは、gulp test

protractor exited with code 8

Chromedriverがないと言われる。

→

protractor.conf.coffeeに追加。

chromeDriver: './node_modules/protractor/selenium/chromedriver'

https://github.com/angular/protractor/blob/master/docs/referenceConf.js

最新バージョンでは、実行できないので、ダウングレードが必要らしい。ダウングレードが面倒なので、対応するまで待つことにする。

https://github.com/angular/protractor/issues/2638

nodejsを最新にしたら、解決してるっぽい。

しかし、他のエラーが出てる。

5.vagrant内のシェルで実行を試してたのも、provisionで実行するように記述。

gitから、ソースを取得。bundle, bower実行。

bower install

→sudo bower install -f --allow-root

npm

/tmp/npm-0/.npm/4f4b43d0-m-0-npm-lodash-2-4-1-package-tgz.lock

→npmのバージョンが古いと、複雑なpackage依存で起こるらしい。

https://github.com/npm/npm/issues/6309

→npmのアップデート

→表示が前と変わったけど、killedって表示されてる。途中で終わっているようで、node_modulesの中に何もない。

→メモリーを増やす

    512->2048

gulp-filterの書き方が変わっていた。



追記(2015/11/22)

JDKが、java cookbookだと、デフォルトで、6が入るらしい。その影響でwebdriverが動かなかったようなので、JDKバージョンを指定して入れる。

   JDK6->7

xvfb用に、DISPLAY=:0 つける。

protractor.confに、directConnect: trueを追加。

https://github.com/angular/angular-phonecat/issues/276

Jenkinsメモ

ホームページのソースについて、gulpを用いて、自動でbuildなどしていましたが、Jenkinsを使って実行できるようにしました。
「CIしたい」というよりかは、「Jenkins使いたい」というための、勉強のようなもの。
出来るようにしたことは、以下の通り。

1.build
  gitからチェックアウト
  npm installなどで、必要な環境構築
  Jadeやsassなどからビルド

2.lint
  coffee-scriptやsassなどのソースを解析
  checkstyleなど

3.test
  動作について、e2eテスト
  ユニットテストもしたかったけど、するほどのソース量がなかった。

4.deploy
  buildしたソースをサーバーに転送する



これらのJenkins設定を行う際にあった問題と解決について、メモがあるので以下に記載します。メモなので言葉足らずなところもあるかもしれませんが、後で気が向いたら追記します。少しでも何か参考になれば。

jenkinsメモ

1.Jenkinsが、グローバルに入っている、gulpなどを読み取れない。

カスタムワークスペースを利用

C:\Users\sora\Documents\Jenkins\myweb

npm config set cache C:\npm\npm-cache --global

http://kakakikikeke.blogspot.jp/2013/08/windowsjenkins.html

実行ユーザがLocal SystemになっているためWindowsに設定しているJAVA_HOME等の環境変数が有効になっていない

■解決方法

ファイル名を指定して実行からservices.mscを入力

一覧からJenkinsを探す

右クリックからプロパティを開く

プロパティダイアログが開いたらログオンタブを選択

アカウントを選択しWindowsにログインするユーザ名とパスワードを入力する

アカウントを検索した場合は参照から検索できる

名前を入力して「名前の確認」というボタンを押下するとそのユーザがいるかどうかを確認できる

アカウントが設定できたらプロセスの一覧画面に戻り右クリックから再起動を実施すると環境変数が反映される

2.build

json,jadeのデータが一部gitにあげてないので、ローカルでコピーする　→タスクとして追加

3.test

A Jasmine spec timed out. Resetting the WebDriver Control Flow.

  繝�繧ｹ繝茨ｼ域峩譁ｰ螻･豁ｴ�ｼ�

    笨� 繧ｵ繝悶Γ繝九Η繝ｼ縺ｮ譛�蠕後�ｮ隕∫ｴ�縺ｯ縲�2006蟷ｴ縲�

      - Error: Timeout - Async callback was not invoked within timeout specified by jasmine.DEFAULT_TIMEOUT_INTERVAL.

「Windowsではサービスとしてcronなどのdaemonを起動させると、そのプロセスからはGUIアプリケーションを立ちあげて動作させることが出来ない制約があります」

らしい

→ローカルでマスタースレーブを作り、起動してそちらで実行することに

コンソール文字化け

　→環境変数に以下を追加

JAVA_TOOL_OPTIONS=-Dfile.encoding=UTF-8 -Dsun.jnu.encoding=UTF-8

http://www.ramuda.co.jp/techlabo/archives/2609

4.lint

scss-lint

バージョンが古かった。更新した。

gemfileを今まであまり扱っていなかった。

coffee-lint

checkstyleがconsole.logに出力される

ファイルに出力したい。　→　一時的に、console.logを変更

色情報を消したい　→　正規表現で削除

console.log = (d) ->
log_file.write d.replace(/[\u001b\u009b][[()#;?]*(?:[0-9]{1,4}(?:;[0-9]{0,4})*)?[0-9A-ORZcf-nqry=><]/g, '') + '\n'

5.deploy

パスワードなどを、引数として指定するようにし、ファイルに保存しない

conn.newer　としているけど、新規だけじゃなくすべてのファイルが転送される。

転送時に更新日時が更新されてる？

→different size とした

gulp buildが、--release --jenkins　をjenkinsで実行した時のみエラーになる

6.フロー

フロー表示をしたかった。

pipeline pluginを入れた。

webページ更新しました。というか、webのお勉強 →bootstrap →webテスト

webページ更新しました。
・・・といっても、コンテンツとしては特になく、構造をね。。。
webコンテンツ作成の勉強になった。

そして、更新履歴を見て、約１年ぶりの更新。。。


以下に、変更点を記載します。

＜template＞

foundation　→　bootstrap

　簡単。
　この前が、jadeでlayoutを外出ししていたため、そこの構成やclass名を変えるだけですぐに対応できた。

＜追加導入＞

サブメニュー

　　これまでサイドのメニューは、topのメニューと同じにしていたけど、同じページ内の項目にしてみた

ページtopへ

　　ページの右下などでよく見る。同じページのtopへ移動ボタン追加。
　　これも、bootstrapであるかと思ったんだけど、無いようなのでjsにサンプルからそのまま記載

affix

　サイドのメニューが、スクロールしても同じ位置に固定する機能。
　bootstrapにあったので、追加してみた。
　追加で、レスポンシブで幅が狭い時は、上部にあるため、コンテンツと被らないように、実施しないよう@mediaで制御追加

scrollspy

　スクロールしていると、現在のコンテンツにあわせたサブメニューの見出しをactive表示して、自分が今どれを読んでいるか分かるもの。bootstrapのサイトでも利用されている。
　こちらも、bootstrapにあるので追加してみた。
　スクロールを始めると、サブメニューの幅が小さくなるというバグが有るらしいので、それにも対応。

fontawesome

　

js concat

 　bowerのものを、１つにconcatしようとしたけれど、jsは順番がやっぱり重要で、順番が異なると動かない。依存関係を確認するというのをいろいろ調べたけれども、できなかったけど、
　　bower.json内のdependenciesの順番変更したらすぐ出来た。
　　dependenciesは、アルファベット順かと思っていたけど、変更できたみたい。

＜構成の分離＞

jade内の記載のうち、ページ構成ではないデータをjsonに分離
繰り返し処理のPGM化促進　変更履歴など

＜CSS＞

css spriteを利用しようとして、うまくいかないからやめた
後で、これだけ試す

scssをsass記法に変えようとして、うまくいかないし、bowerのscssファイルを現在参照しているので、やめた

＜gulp＞

browsersyncで、変更があったらブラウザ上もリロードして確認
gulpのcoffeeコンパイルを、これまで、coffeeだけのもので行っていたけれど、webpackで行う

＜webテスト＞

karma・jasmine

この辺を見て、勉強したので、使ってみようと思った。
静的サイトなので、特にjsのロジックはなく、animationぐらいなんだけど、試してみようとした。
http://qiita.com/hosomichi/items/4e508e804b0e50e7b6ec
http://qiita.com/hosomichi/items/311e3eac4f55183b62c2
http://qiita.com/hosomichi/items/7464c69bf54927d019a7


こちらにもwebpack導入。テストをcoffeeで書くため

DOMの操作をしやすくするよう、karma jquery導入

ページが表示されないと思ったら、相対パスが異なっていた。（specファイルからの相対位置ではない？）
　document.body.innerHTML = window.__html__['../WebContent/history.html']
→document.body.innerHTML = window.__html__['WebContent/history.html']

jsのcoverageがとれないと思ったら、パス指定の間違いだった（間に空白入ってた）
　'WebContent/js/**/* .js': ['coverage']
→'WebContent/js/**/*.js': ['coverage']

karmaでwebページ動作テストをしようと思ったが、ページリンク動作がうまく動かず
結局、karmaはunit testで、integrated testじゃねーからと言われたので、
ひとまずunit testのみを行うことにする
、、、が、単体で出来る事もないのでやめたｗ
http://bittersweetryan.github.io/jasmine-presentation/#slide-17

protractor

そこで、end to endテストを行うことにした。
karmaにも、end2endのプラグインが（非公式？？）あるようだけど、動かなかったので、e2e用という、protractorを利用してみる。
はじめ、for AngularJSと書かれていたので、他のだと使えないと思って諦めていたけど、使ってみたら出来た。検索したら、Angular以外で利用しようとしている人も、まあまあいるみたい

tutorialが、confとspecをjsで書かれていたが、coffeeで書きたい。
エラーが出ていたが、byがcoffeescriptの予約語とかぶっている記事を思い出して、Byに変更すると実行できた。

windowサイズ初期化

リンククリック後のスクロール値取得しようとしたが、animationで時間差があるため、sleep使用

helper関数化

テスト完成後、共通部分を関数として外出し
　しかし、javascriptの文法＋coffeescriptの文法がいまいちわかっていないので、なかなか動かない。結局、()のあるなしで動かなかったみたい。
　　getScrollTop
　→getScrollTop()

さらに、helper関数として外出し

サーバー終了設定

gulpの設定で、こちらの方法で、サーバーのexitをしようとすると、テスト実行されない
https://github.com/schickling/gulp-webserver/issues/48

こちらの方法で、終了時の処理を入れると、テストが実行後、自動終了するようになった
    .on 'end', -> process.exit()
http://stackoverflow.com/questions/29968380/how-to-exit-protractor-when-done


なお、参考までに、最終的なspecファイルはこちら。

<e2eSpec.coffee>

h = require('../helpers/helper')

describe 'テスト（更新履歴）', ->

  submenu_link_list = $$('.submenulist li')
  submenu_link_last = submenu_link_list.last()
  submenu = $('.submenulist')
  mainrow = $('.main-row')
  gototop_link = $('.gototop')

  SLEEP_TIME = 1000
  INIT_WINDOW_WIDTH = 1500
  INIT_WINDOW_HEIGHT = 1000
  SCROLL_TEST_ITEM = 5


  beforeEach ->
    browser.driver.manage().window()
        .setSize(INIT_WINDOW_WIDTH, INIT_WINDOW_HEIGHT)
    browser.ignoreSynchronization = true
    browser.get browser.baseUrl+'/history.html'
    return


  it 'サブメニューの最後の要素は「2006年」', ->
    expect(submenu_link_last.getText()).toEqual '2006年'

  it 'サブメニューの最後の要素のリンク先は、#submenu[0-9]*であること', ->
    submenu_link_last.$('a').getAttribute('href').then (submenu_link_url) ->
      expect(submenu_link_url).toMatch '#submenu[0-9]*$'

  it 'サブメニューリンクをクリックすることで、ページ内リンク先に移動すること', ->
    # 初期スクロール位置の確認
    expect(h.getScrollTop()).toEqual 0

    # サブメニューリンクをクリック
    submenu_link_last.click()
    browser.sleep(SLEEP_TIME)

    # クリック後のスクロール位置の確認
    submenu_link_last.$('a').getAttribute('href').then (submenu_link_url) ->
      submenu_link_id = h.getLinkId(submenu_link_url)
      $(submenu_link_id).getLocation().then (locationdata) ->
        mainrow.getCssValue('padding-top').then (headerH) ->
          expect(h.getScrollTop()).toEqual locationdata.y - parseInt(headerH, 10)


  it 'スクロールすると、サブメニューが合わせて移動すること', ->
    # サブメニューの初期location取得
    init_locationdata_y = 0
    submenu.getLocation().then (locationdata) ->
      init_locationdata_y = locationdata.y

    # スクロール
    submenu_link_list.get(SCROLL_TEST_ITEM).click()
    browser.sleep(SLEEP_TIME)

    # スクロール後のサブメニューの位置が、スクロール量+初期locationであること
    h.getScrollTop().then (scrollTop) ->
      submenu.getLocation().then (locationdata) ->
        expect(locationdata.y).toEqual scrollTop + init_locationdata_y

  it 'スクロールすると、scrollspyが動作すること', ->
    # 初期はactive状態ではないこと
    expect(h.hasClass(submenu_link_list.get(SCROLL_TEST_ITEM), 'active')).toBe(false)

    # スクロール
    submenu_link_list.get(SCROLL_TEST_ITEM).click()
    browser.sleep(SLEEP_TIME)

    # スクロール後に、titleに一致した項目がactiveになっていること
    expect(h.hasClass(submenu_link_list.get(SCROLL_TEST_ITEM), 'active')).toBe(true)

  it 'トップへボタンで、ページ先頭に移動すること', ->
    # トップへボタンをクリック前に、スクロールする。初期位置がページ先頭でないこと
    submenu_link_list.get(SCROLL_TEST_ITEM).click()
    browser.sleep(SLEEP_TIME)
    expect(h.getScrollTop()).toBeGreaterThan 0

    # トップへボタンをクリック
    gototop_link.click()
    browser.sleep(SLEEP_TIME)

    # ページ先頭に移動していること
    expect(h.getScrollTop()).toEqual 0

<helper.coffee>

module.exports = {
  getScrollTop : ->
    browser.executeScript('return document.body.scrollTop;')

  hasClass : (element, cls) ->
    element.getAttribute('class').then (classes) ->
      classes.split(' ').indexOf(cls) != -1

  getLinkId : (url) ->
    url.substring(url.lastIndexOf('#'), url.length)
}

＜今後＞

今後、追加でやりたいことメモ
・Jenkinsでテスト　CI　→（7/14 build/test/lint）
・css sprite　→アイコン整理したら、spriteする画像がなくなった。。。
・coffeescript lint　→（7/11）
・sourcemap　→（7/11 仮）
・SNSアイコン変更　→　（7/15）
・gulpファイルをtaskで分割　→　(11/26)


なお、現在、こちらの本で、javascriptのことを一旦勉強中。

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