gulpでsassをコンパイルするタスクを作る - yutaponのブログ
何番煎じかわからないけど、gulpを使ってみたら中々良かったのでまとめてみます。 gulp.jsとは gulp.js はフロントエンド用のタスクランナーってやつです。 同じタスクランナーの競合に Grunt がありますが、後発だけあってストリームを駆使して可読性の良い設定ファイルが書けます。 Gruntでできることは大体gulpでもできるので、どちらを使ったら良いかは好みの問題かも知れません。 この記事ではsassのコンパイルをするタスクと、関連してベンダープレフィックスを自動で付与するところまで紹介します。 gulpのインストール npmコマンドでサクッと入れます。 $ npm install -g gulp これでgulpコマンドが使えるようになりました。 gulpでsassのコンパイルをする gulpでsassをコンパイルするのに、こちらのプラグインを使います。 gulp-ruby-
gulpは、destの後にもアクションを繋げられる - Qiita
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のタスクを同期的に実行する方法 - Qiita
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 docsに記載されているもの、そしてその発展形を紹介します。 タスク内の非同期処理が一つだけの場合 Streamをreturnする まずは1番お手軽な
gulp.jsでWeb開発環境をつくる - Qiita
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($
Browserify: それはrequire()を使うための魔法の杖 - Qiita
JavaScript界のハリーポッターこと「Browserify」が最近元気ですね。Node.js的な var myModule = require('myModule')式の記述が、ブラウザのスクリプトでも使えるようになって、ついでに1ファイルにまとめるのもやってくれるツールです。ポストRequireJSとして期待されています。 ただ、公式ドキュメントがコマンドラインの説明に重点を置いていて、最初これだけだといまいち分かりにくい...。そこで、実際の開発で使いやすいように、ビルドツール(gulp.js)から実行するための最小構成を作ってみようかと思います。(Gruntでも同様のことは可能です) require!: Bowerも使えます 対象のスクリプトの中身は、例えばこんな感じ。この例では、ModernizrとjQueryと、独自スクリプトを組み込んでいます。外部ファイルを指定するだけで
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
React入門 - Part2: Browserify/Reactify/Gulpを使う - Qiita