読者です 読者をやめる 読者になる 読者になる

Motomichi Works Blog

その日学習したことについて書いている日記です。誰かの役に立ったらそれはそれで嬉しいです。

gulpの設定ファイル、package.jsonとgulpfile.jsの実際使っている記述内容みたいなものをここに書いて更新していく その0001

参考にさせて頂いたページ

gulp.spritesmithでCSS spriteをやってみた。【gulp】 - E-riverstyle Vanguard

gaze - タスクランナーの連続実行を抑止する: gulp.js, Grunt - Qiita

gulp入門その2―ファイルの監視をしてみる | アライドアーキテクツのクリエイターブログ

gulpで依存関係を考慮した自動コンパイル - Hatena Developer Blog

gulp タスクをファイル分割する | アカベコマイリ

npmのアップデート - Qiita

gulp で markdown から html と pdf を生成してみる - Qiita

Node.js - Gruntの代替ビルドツール。gulpをはじめる。 - Qiita

タスクランナーgulp.js最速入門 - id:anatooのブログ

npm で依存もタスクも一元化する - Qiita

gulpは、destの後にもアクションを繋げられる - Qiita

gulp.watchの注意点メモ - Qiita

gulp.js その4 プラグイン一覧 - Qiita

Gulp 導入にあたって - Qiita

環境

  • OS : Mac OS X 10.7.5
  • npm : 2.7.0
  • gulp : CLI version 3.8.0
  • gulp : Local version 3.8.11
  • node : v0.11.13

今日の記事ではgulpのグローバルインストールまでは済んでいるものとして進める。

npm のアップデート

npm update -g npm

プロジェクトを作成

とりあえずnpmフォルダを作成してその中で進めてみる

npm initとgulpをローカルにインストール

作成したnpmフォルダの中で以下のコマンドを実行

npm init

npm install --save-dev gulp

package.jsonが作成された

gulpがプロジェクトにインストールされた

npm initするときに何も入力せずにenterを押していったので、package.jsonは以下の通り

{
  "name": "npm",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "gulp": "^3.8.11"
  }
}

今のところgulpだけだけど、gulpのプラグインが今後最低限追加されていく予定。

gulpfile.jsを試しに作る

記述内容は以下の通り

var gulp = require('gulp');

gulp.task('default', function () {
  console.log('sample');
});

gulpコマンドを実行してみる

gulp

または

gulp default

を実行すると

[02:43:21] Starting 'default'...
sample
[02:43:21] Finished 'default' after 203 μs

みたいな感じで出力されるはず。

npm run exampleで、gulp defaultを実行できるようにする

npm で依存もタスクも一元化する - Qiita

を参考にやってみました。

package.json

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },

となっているところを

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "example" : "gulp default"
  },

にして、以下のような状態にする

{
  "name": "npm",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "example" : "gulp default"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "gulp": "^3.8.11"
  }
}

このように記述すると

npm run example

コマンドを実行することで

gulp default

が実行できるようになる。

プラグインの追加

例えば以下の通り

npm install --save-dev gulp-watch

package.jsonの記述内容をここに更新していく

{
  "name": "npm",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test"   : "echo \"Error: no test specified\" && exit 1",
    "gulp__watch__project_0000"  : "gulp watch__project_0000",
    "gulp__watch__project_0001"  : "gulp watch__project_0001",
    "gulp__sample"               : "gulp sample"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "gulp": "^3.8.11",
    "gulp-compass": "^2.0.4",
    "gulp-watch": "^4.2.1"
  }
}

gulpfile.jsの記述内容をここに更新していく

/*
 * gulpプラグイン読み込み
 */

var gulp        = require('gulp');
var compass     = require('gulp-compass');





/*
 * 手で設定するところ
 */

var projectName = [
  'project_0000',
  'project_0001'
];





/*
 * 関数を定義
 */

//task実行に必要な配列要素を設定
var getParams = function(i_projectName){
  var _temporary = {};
  _temporary['root_path']    = 'projects/'+ i_projectName +'/';
  _temporary['assets_path']  = _temporary['root_path'] + 'assets/';
  _temporary['scss_path']    = _temporary['assets_path'] + 'scss/';
  _temporary['css_path']     = _temporary['assets_path'] + 'css/';
  _temporary['image_path']   = _temporary['assets_path'] + 'img/';
  _temporary['watch_target'] = _temporary['assets_path'] + '**/*.*';
  _temporary['src']          = _temporary['assets_path'] + 'scss/*.scss';
  _temporary['compass_obj']  = {
    "config_file" : _temporary['root_path'] + 'config.rb',
    "comments"    : false,
    "css"         : _temporary['css_path'],
    "sass"        : _temporary['scss_path'],
    "image"       : _temporary['image_path'],
  }
  return _temporary;
}

//プロジェクトソースをwatchする関数
var projectWatch = function(i_projectName, i_params){
  gulp.watch(i_params['watch_target'],function(event){
    var str = event.path;
    if(str.match('.scss')){
      gulp.src(i_params['src'])
        .pipe(compass(i_params['compass_obj']))
        .pipe(gulp.dest('../build_1'))//コンパイルされたcssを任意のディレクトリにコピー
        .pipe(gulp.dest('../build_2'));//同じcssをこっちにも
      console.log('type:::'+event.type+'   path:::'+event.path);
    }else if(str.match('pc-bg-sprite-img-materials-0001.png')){
      console.log('type:::'+event.type+'   path:::'+event.path);
    }
  });
}

//watch__hogeタスクを生成する関数
var make__watchTask__once = function(i_projectName){
  gulp.task('watch__'+i_projectName,function(){
    var _params = getParams(i_projectName);
    projectWatch(i_projectName, _params);
  });
}

// sample関数を定義
var make__sampleTask__once = function(){
  gulp.task('sample', function () {
    console.log('sample');
  });
}





/*
 * 関数を実行(関数の実行であり、gulpタスクの実行ではない)
 */

//watch__hogeタスクを生成
make__watchTask__once(projectName[0]);
make__watchTask__once(projectName[1]);

//sample
make__sampleTask__once();

ディレクトリ構造

treeコマンドで出たやつをそのまま貼ると以下のような感じ

.
├── gulpfile.js
├── node_modules
│   ├── gulp
│   ├── gulp-compass
│   └── gulp-watch
│
├── npm-debug.log
├── package.json
└── projects
    ├── project_0000
    │   ├── assets
    │   └── config.rb
    └── project_0001
        ├── assets
        └── config.rb