ここにおじさんは疑問をいだいてしまいました。 グローバルにインストールしてしまっていいのか？ そうです。__問題はnpm install gulp-cli -gです。__先のやり方はGulp公式が推奨している方法であり、「gulp入門」と検索すれば同じ方法を紹介している記事が多くヒットするので一般的な方法であるのは間違いないです。しかし、この方法はタブーを犯しています。 何がタブーなのか？ __-gを使ってインストールするnpmモジュールは個々のプロジェクトが依存することの無い疎な状態であるべき__だと私は考えます。もっと具体的に言うと、ローカルモジュールの実行の為にグローバルモジュールを実行するのは問題であると言えます。これはnpmモジュール全てに言えると思います。 どういった問題が起こるか？ gulp-cliをグローバルにインストールしてしまうと、同じプロジェクトでも開発者によってgu

ウェブ制作の現場では作業の自動化を行うことが多いです。Node.jsインストール時に付属するnpm (Node Package Manager)を使用すれば、タスク処理が実現できます。 npmとはNode.jsのモジュールを管理するためのツールであり、タスク処理にはnpmの機能のnpm-scriptsを使用します。本記事はnpm-scriptsを使ったタスク実行環境が構築できることを目標に解説します。 そもそもnpm-scriptsとは何か？ npm-scriptsとは、package.jsonファイルに記述可能なシェルスクリプトのエイリアスです。エイリアスとはコマンド名を別のコマンド名に置き換えることです。以下のnpm-scriptsはHello world!!を表示させるコマンドのエイリアスを作成する例です。 ▼package.jsonファイル { "scripts": { "say"

普通に使う分には全く困らないほどの数のプラグインがGulpにはあります。 Githubでのstar数からも明らかなように、GoogleのWenStarterKitでもGulpが採用されるなど、注目度はますます高くなっています。 Gruntとの比較 Gruntと比較してのメリット・デメリットは以下のようになります。 メリット Gruntより設定ファイルが記述しやすい StreamAPIを利用することでファイルを毎回書き出すGruntより高速でエコ デメリット 記述がよりNodeに近くなるため、複雑なことは敷居がやや高め プラグイン開発のためのドキュメントが少ない 今日のゴール Gulp.jsを使ってコーディング作業を10倍速くする！ そんな環境を作りたいと思います。 1. Node.jsをインストール まずはNode.jsをインストールしましょう。 Node.js http://nodejs

「Gulp.jsで飼いならす、最新フロントエンドツールの使い方」 Mars Vanilla vol.3 https://www.facebook.com/events/826486720748338/

gulp.task() を失敗終了するにはどうしたら良いでしょうか？ 具体的には外部プロセスが終了コード0以外で終了したときにtaskを失敗させたい（gulpの実行をそこで止めたい）です。 次のようなtaskを想定しています。 var spawn = require('child_process').spawn; var gulp = require('gulp'); gulp.task('mytask', function() { var proc = spawn('my_command'); proc.on('exit', function(code, signal) { if (code !== null && code !== 0) { // ここで gulp task を失敗させたい } }); });

何番煎じかわからないけど、gulpを使ってみたら中々良かったのでまとめてみます。 gulp.jsとは gulp.js はフロントエンド用のタスクランナーってやつです。 同じタスクランナーの競合に Grunt がありますが、後発だけあってストリームを駆使して可読性の良い設定ファイルが書けます。 Gruntでできることは大体gulpでもできるので、どちらを使ったら良いかは好みの問題かも知れません。 この記事ではsassのコンパイルをするタスクと、関連してベンダープレフィックスを自動で付与するところまで紹介します。 gulpのインストール npmコマンドでサクッと入れます。 $ npm install -g gulp これでgulpコマンドが使えるようになりました。 gulpでsassのコンパイルをする gulpでsassをコンパイルするのに、こちらのプラグインを使います。 gulp-ruby-

gulpでwatch中にエラーが出たとき、ターミナルでエラーメッセージが出ててもなかなか気づけないので通知を出すようにした。 gulpfileの記述とか詳細はQiitaに投稿したのでこちらを参照。 gulpタスク実行中にエラーが出たらデスクトップ通知を出す | Qiita 通知出すやつ 今回gulp-notifyとnode-notifierの2つを使ってみた。gulp-notifyはgulp-plumberと組み合わせるにはベストな感じで何も考えず設定できる。 node-notifierはterminal-notifierを使ってて細かい指定ができる。めんどくさくないならnode-notifierでタスク毎に通知をカスタマイズするとヨサソウ。 イベント監視する Qiitaの方には書かなかったけど、gulpのプラグインはだいたいエラーが起きたときにはthis.emit('error', er

要約 rimrafかdelを使用しましょう。 はじめに gulp.jsにおいて、かつてはファイル削除のためのプラグインとしてgulp-rimrafやgulp-cleanが存在しましたが、どちらもdeprecateされました。gulp.srcを用いない、ファイル削除以外の余分な処理を行わない手段を用いれば、これらのプラグインを使用する必要はありません。 単一のファイル／ディレクトリを削除する rimrafを使用します。従来より、gulp-rimrafの作者が推奨している方法です。 var rimraf = require('rimraf'); gulp.task('clean', function (cb) { rimraf('./dir', cb); }); gulp.task('build', ['clean'], function() { // Something });

gulpのAPIマニュアルにも書かれていますが、gulpでは、gulp.destを書いたからと言って、そこで終わりにする必要はありません。 注: 下記、CoffeeScriptで書いてますが、gulpの標準はJavaScriptです。適宜読み替えてください。 例: 複数ディレクトリに出力する 例えば、こんな風に書けば、3つのディレクトリにテキストファイルをコピーできます。 gulp = require 'gulp' gulp.task 'multi-dist', -> gulp.src ['./src/*.txt'] .pipe gulp.dest './dist1/' # 1つ目のdest .pipe gulp.dest './dist2/' # 2つ目のdest .pipe gulp.dest './dist3/' # 3つ目のdest

gulpのタスクは基本的に非同期で実行されます。例えば以下のコードでは、ファイルコピーが完了する前に "done" と表示される可能性があります。 gulp.task('copy', function() { // ファイルをコピー gulp.src('src/file').pipe(gulp.dest('dest')); }); // copyに依存するタスク gulp.task('done', ['copy'], function() { // ファイルコピー完了「前」に実行される！！ console.log("copy done"); }); gulpが高速に動作する理由の一つはこの非同期性ですが、どうしても同期的に処理したい場合（すなわち特定のタスクの完了を待ってから別なタスクを実行したい場合）もあると思います。 この記事では同期的にタスクを実行する方法として、gulp API d

チートシートで使われているサンプルコード コマンド gulpをグローバルにインストール: $ npm install -g gulp gulpをローカルにインストール: $ npm install --save-dev gulp $ npm install --save-dev gulp-other-plugins タスクを実行: $ gulp task_name 複数タスクを実行: $ gulp task_name other_task JavaScript: gulpfile.js Single Dest & Watch Multi Dest Incremental Rebuilding Only Changed Async Streams Serial Join Stream Array CoffeeScript: gulpfile.coffee Single Dest & Watc

フロントエンド開発効率化のため、この度初めてタスクランナーを使ってみました。 最近はGruntよりgulpの方が盛り上がってるようなのでgulpを選択。 javascriptの開発をしていると、minifyする時に開発／商用環境でホスト名だのIPアドレスだの定数をコンパイル時に動的に生成したい場合があると思いますが、gulp.jsのuglifyプラグインで割りと簡単に出来ました。 基本的な使い方はこの辺で はじめてのgulp のような形式で環境に合わせたコンパイルが出来るようになります。 必要なnpmモジュール gulp //ご存知gruntの後継?タスクランナー gulp-uglify //難読化ツールuglify.jsのgulpプラグイン gulp-rename(任意) //gulpでファイルをリネームするプラグイン minimist //コマンドライン引数をparseするモジュール

この記事はIwate Developers Advent Calendar 2014の6日目の記事です。 Iwate Developers Advent Calendar 2014 - Qiita 記事の内容はというと、岩手にまったく関係ありません。 学生の頃はフロントエンドを軽視してクソコードを量産していたので、今の学生の方にこんな風に作り始めるといいよって紹介する感じで書きたいと思います。 はじめに 昨今のフロントエンド開発はとにかく複雑になってきていて、学習コストが半端なくなってきてます。 angularとかbackbone.jsとか、最近ではreact+fluxなど、トレンドの移り変わりが激しいです。 またGruntやgulp.jsなどのタスクランナーの活用がフロントエンドでは欠かせなくなっていて、使ってないなら今すぐ導入すべき、とも言えます。 最近gulp.jsを使っていて、gu

相変わらず仕事ではデザインやりつつJavaScript書いている。 タスクランナーとしてGrunt.jsを使っていたけれども、使ううちに段々不満がでてきた。遅かったり、記述が冗長になりがちでつらかったので最近になってgulpに乗り換えた。 gulpは良い。タスクは自動的に並列に実行され、かつストリームで処理されるので速いし、タスクの記述もストリームベースの書き方のおかげでGrunt.jsに比べるとだいぶ短くなる。 ただ、そこらにあるgulpをちょっと試しただけの日本語の記事やドキュメントをみてても実際のプロジェクトで使えるレベルまでの知識を得られず学習に一日かかった。 この記事では、gulpをまともに使えるようになるまでに必要な知識を書く。 導入とHelloWorld まずは導入。npmからgulpをインストールする。 $ npm install gulp -g $ gulp -v [gu

これからはじめる Gulp シリーズこれからはじめるGulp（19）：gulp-sketchとgulp-execを使ったSketch 3デザインデータの画像書き出し はじめに この記事はGulp.js（全俺） Advent Calendar 2014とSketch 3 Advent Calendar 2014の19日目です。前日のSketch 3 Advent Calendar 2014は@soutaroさんのヒラギノの縦位置を揃えるちょうべんりなSketchプラグインの紹介でした。2つのAdvent Calendarを掛け持ちしている記事でややこしくなってごめんなさい。Gulp.js（全俺） Advent Calendar 2014の方はnodebrewを使ったGulp.js環境の構築や使い方について一から紹介しているので興味があれば1日目から読んでみてください。 前回のGulp.js（

Titanium でいい感じの環境を整えてみましたので紹介します。 coffeeScriptでalloyフレームワークを書いて、js変換をgulpで監視・自動化し、tishadowでリアルタイム反映させてます、という内容です。 tishadow 何よりまずはtishadowです。これで開発速度が倍になると言っても過言ではない。 インストール

var gulp = require('gulp'); var $ = require('gulp-load-plugins')(); var browserSync = require('browser-sync'); var rimraf = require('rimraf'); var runSequence = require('run-sequence'); gulp.task('jshint', function () { return gulp.src('src/scripts/**/*.js') .pipe($.jshint()) .pipe($.jshint.reporter('jshint-stylish')); }); gulp.task('image', function () { return gulp.src('src/images/**/*') .pipe($

これからはじめる Gulp シリーズこれからはじめるGulp（17）：SketchTool（Sketch 3 command line tool）を使ったアートボード・スライスの書き出しとgulp-execプラグインを使ったSketchtoolの呼び出し はじめに この記事はGulp.js（全俺） Advent Calendar 2014です。 前回のこれからはじめるGulp（16）：gulp-image-resizeプラグインを使ってサムネイルやレスポンシブイメージを作るでgulp-image-resizeプラグインとgulp-imageminを使ったサムネイル作成と軽量化を試しました。今回はさらに踏み込んでドローイングツールのSketch 3のコマンドラインツールSketchToolを使ったアートボード・スライスの書き出しとgulp-execプラグインを使ったSketchToolの呼び

はじめに この記事はGulp.js（全俺） Advent Calendar 2014です。 前回のこれからはじめるGulp（17）：SketchTool（Sketch 3 command line tool）を使ったアートボード・スライスの書き出しとgulp-execプラグインを使ったSketchtoolの呼び出しでSketch 3のコマンドラインツール「SketchTool」を使ったアートボード・スライスの書き出しとgulp-execプラグインを使ったSketchToolの呼び出しについて試しました。今回はSketchToolの各コマンドとオプションを試して、Gulp.jsと連携するための下調べをしたいと思います。 SketchToolのコマンド まずは、コマンドについてお復習いです。主にexportコマンドを使うことが多いと思います。今回はexport, listコマンドを中心に試して