2016年02月12日

gulpでエラー

久々にgulpを実行したら以下の様なエラーが。

Error: Cannot find module 'object-assign'


ないらしいのでインストール。

npm install --save-dev object-assign


そんでもってgulpを実行したらまだ以下の様なエラーがbabelがアレらしい。

Error: Cannot find module 'babel-core'


とりあえずないらしいのでインストール。

npm install --save-dev babel-core


これでおk。
タグ:GULP BABEL
posted by ねこまんま at 21:33 | Comment(0) | TrackBack(0) | gulp | 更新情報をチェックする

2015年09月25日

gulpでbrowserifyとBabel

BabelはES6のimport/export構文をrequireに変換してしまうためそのままでは利用できない。

import { main } from './main';
console.log(main(1,2));


これを以下のように変換する

'use strict';

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }

var _mainJs = require('./main');

var _mainJs2 = _interopRequireDefault(_mainJs);

console.log((0, _mainJs2['default'])(1, 2));


このままでは利用できないのでbrowserifyなどを利用してrequire()が利用できるようにしなくていけない。

調べてみるとbrowserifyとbabelifyというツールでコンパイルを行うらしい。

以下のコマンドでインストール。

sudo npm install browserify babelify vinyl-source-stream --save-dev


すると以下の様なタスクでコンパイルできる。

var gulp       = require('gulp'),
browserify = require("browserify"),
babelify = require("babelify"),
source = require("vinyl-source-stream");

gulp.task('babelify', function () {
browserify({
entries: "./babel/script.js",
extensions: [".js"]
})
.transform(babelify)
.bundle()
.on("error", function (err) { console.log("Error : " + err.message); })
.pipe(source("./script.js"))
.pipe(gulp.dest("./asset/js"));
});


babel単体だとグローバルに'use strict'が付与されるのが気になってたけどこれなら各名前空間のみに付与されるのでそれもよさ気だと思った。
posted by ねこまんま at 08:59 | Comment(0) | TrackBack(0) | gulp | 更新情報をチェックする

Babelをgulpで実行

久々に新規サイトを作成するのでBabelを利用してES6で書こうとしております。

BabelはES6をES5形式にコンパイルしてくれるAltJS。CoffeeScriptなど他のAltJSと比較すると学習コストが将来無駄にならない点がよい。

gulpの使い方は「タスクランナーgulp入門」などを参照に。Babelに関しては以下のgulp-babelをインストール。

sudo npm install gulp-babel --save-dev


以下のような設定を追加するとbabelディレクトリの内容をassets/jsディレクトリに書きだしてくれる。

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

//babel
gulp.task('babel', function () {
gulp.src("/babel/*.js")
.pipe(babel())
.pipe(gulp.dest("/assets/js"));
});


ターミナルでは以下のコマンドを実行する。

gulp babel
posted by ねこまんま at 07:09 | Comment(0) | TrackBack(0) | gulp | 更新情報をチェックする

2014年07月31日

gulpでJadeをコンパイル

基本は「タスクランナーgulp入門 - to-R」を参考に。

以下がgulpでJadeをコンパイルする為の処理。

gulp.task('jade', function () {
gulp.src('htdocs/jade/**/*.jade')
.pipe(jade())
.pipe(gulp.dest('htdocs/'));
});


ただし、このままだとincludeファイルなども書き出してしまう。

以下のようにすると_付きのファイルは出力されなくなります。

gulp.task('jade', function () {
gulp.src(['htdocs/jade/**/*.jade','!htdocs/jade/**/_*.jade'])
.pipe(jade())
.pipe(gulp.dest('htdocs/'));
});
タグ:JADE GULP
posted by ねこまんま at 15:36 | Comment(0) | TrackBack(0) | gulp | 更新情報をチェックする