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

LAMPエンジニアってこういうもんでしょ

こういうもんでしょって話をつらつらと

gulpで頑張ってみたらはまった話(未解決)

最近行きつけの日本酒居酒屋で
「いつものたなかです。」で予約が取れるようになりました。
たなかの中のたなかです。

すっかりフロントエンドエンジニアになったので
フロントエンドエンジニアらしい話もしてみようかと思います。

htmlテンプレートを大量に作る仕事があって
最近gulpが流行っているので
gulpでタスクランナー作ってがっちゃんこしたら速いかな~
みたいな事を考えて作ってみたわけです。
ヘッダーとフッターは共通で
インナーだけ色々と違うテンプレートを数種類作る
みたいな感じだったので
こんな風にしてみました。

/work_space/
|--README.md
|--build.sh
|--inner
|  |--inner01
|  |  |--gulpfile.js
|  |  |--src
|  |  |  |--js
|  |  |  |  |--inner.js
|  |  |  |--sass
|  |  |  |  |--inner.scss
|  |  |  |--template
|  |  |  |  |--config.ejs
|  |  |  |  |--inner.ejs
|  |--inner02
|  |  |--gulpfile.js
|  |  |--src
|  |  |  |--js
|  |  |  |  |--inner.js
|  |  |  |--sass
|  |  |  |  |--inner.scss
|  |  |  |--template
|  |  |  |  |--config.ejs
|  |  |  |  |--inner.ejs
|--outer
|  |--src
|  |  |--js
|  |  |  |--config.js
|  |  |  |--module.js
|  |  |--sass
|  |  |  |--layout.scss
|  |  |--template
|  |  |  |--layout_footer.ejs
|  |  |  |--layout_header.ejs
|--package.json
|--node_modules
|--.gitignore

それで各innerディレクトリの下にあるgulpfile.jsはこんな感じです。

// 環境設定
var rootPath = '../../';
var outerPath = rootPath + 'outer/';
var outerSrcPath = outerPath + 'src/';
var innerSrcPath = './src/';
var compiledDir = './dist';


// 設定ファイル読み込み
var gulp = require('gulp');
var concat = require('gulp-concat');
var fs = require('fs');
var uglify = require('gulp-uglify');
var ejs = require("gulp-ejs");
var sass = require("gulp-ruby-sass");
var jswrap = require('gulp-js-wrapper');
var minifyCSS = require('gulp-minify-css');

/**
 * jsのビルド
 */
gulp.task('js', function () {

  var files = [
    outerSrcPath + 'js/config.js',
    outerSrcPath + 'js/module.js',
    innerSrcPath + 'js/inner.js'
  ];

  var jsWrapOptions = {
    safeUndef: true,
    globals: {
      'window': 'root',
      '{}': 'global'
    }
  };

  return gulp.src(files)
    .pipe(concat('template.js'))
    .pipe(jswrap(jsWrapOptions))
    .pipe(uglify())
    .pipe(gulp.dest(compiledDir));

});

/**
 * cssのビルド
 */
gulp.task('sass', function () {
  var files = [
    outerSrcPath + 'sass/layout.scss',
    innerSrcPath + 'sass/inner.scss'
  ];

  var options = {
    style: 'compressed',
    noCache: true
  };

  return gulp.src(files)
    .pipe(sass(options))
    .on('error', function (err) { console.log(err.message); })
    .pipe(concat('layout.css'))
    .pipe(minifyCSS())
    .pipe(gulp.dest(compiledDir));
});

/**
 * htmlのビルド
 */
gulp.task('template', function () {
  // 変数パラメータ設定
  var script = fs.readFileSync('./dist/template.js');
  var css = fs.readFileSync('./dist/layout.css');
  var ejsOption = {
    SCRIPT: script,
    CSS: css
  };

  var files = [
    innerSrcPath + 'template/config.ejs',
    outerSrcPath + 'template/layout_header.ejs',
    innerSrcPath + 'template/inner.ejs',
    outerSrcPath + 'template/layout_footer.ejs'
  ];

  return gulp.src(files)
    .pipe(ejs(ejsOption))
    .pipe(concat('template.html'))
    .pipe(gulp.dest(compiledDir));
});

/**
 * まとめてビルド
 */
gulp.task('build', ['js', 'sass'], function() {
  gulp.start('template');
});

// デフォルトのタスク
gulp.task('default', ['build']);

こんな感じで書いてgitにpushして
別の環境で

git pull
npm install

していざ階層下ってgulp!
ってしてみたらdestがうまくいっていない風なんですよね。
エラーとか一切出ずに終了。
templateだけはtemplate.jsが無いところでエラー吐いておしまいっていう
なんとも悲しい結末になりました。


これがgit cloneして落としてきたものを
他のディレクトリに移動してnpm installして~
ってやるとうまくいく不思議。。。
ちなみにgitプロジェクトに置いた状態で

chmod 777 -R ./*

とかやってもうまく行かず。。。


Linux環境だとSELinuxが悪さして~
っていう経験があるのではずしてみたりとかもしたんですがうまくいかず。。。
Mac Bookでもうまくいかないので何かそういう制限があるのかな~と思うのですが
debugの仕方も知らないしお手上げ状態です。


誰か知っていたら教えて下さい!!

あ、でもgulpは超イイ奴です。
仲良しになりたいです。ぺろぺろ