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

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

環境

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

Motomichi Works Blog

モトミチワークスブログです。その日学習したことについて書いている日記みたいなものです。