サクサク読めて、
アプリ限定の機能も多数！
アプリで開く
Phoenixフレームワークでは、mix phoenix.serverするとデフォルトでbrunchが立ち上がって、 web/staticらへんのファイルを監視してくれます。 とてもありがたいのですが、「え〜、brunch???」と思う方もいらっしゃるでしょう。 そんなときは、おもむろにconfig/dev.exsを開いて、 watchers: [node: ["node_modules/brunch/bin/brunch", "watch"]] こんな行を watchers: [gulp: ["watch"]] とかに変えてみましょう。gulpが立ち上がるはずです。 追記 調べてみたら、タスク定義していろいろやってくれるライブラリがあるっぽいです。1から書くのが面倒なら、使ってみるのもいいかもしれません。 phoenix_gen_webpack phoenix_gen_gulp_jspm
先日、gulp-ruby-sass 1.0.0-alpha にアップデートしたところ、Sass のコンパイルがエラーでコケるようになりました。 半年前に書いたgulp-ruby-sass 0.6 にアップデートしたらコケた話のように、オプションの指定方法が変わったのかな？と思いつつ公式リポジトリを確認したところ、タスク自体の書式が変わるようです。 sindresorhus/gulp-ruby-sass at rw/1.0： https://github.com/sindresorhus/gulp-ruby-sass/tree/rw/1.0 今後 1.0 未満のバージョンはサポートされないようですので、覚えておくとよさそうです。 やったことまず、gulp-ruby-sass 1.0.0-alpha にアップデートします。 $ npm updategulp-ruby-sass自分の場合、個別
最近になってfrontのコードやサーバーのコードは生のjs(ES5)で書かかずbabeljs(旧6to5)とかで書くことが体感ですが増えてきました。 しかしgulpfileは生のjsで書いたり、coffeescriptで書くことが多いように感じます。 そこで試しにES6で書いたらどんな感じになるか見てみたかったので適当なgulpfileをES6に書き換えてみようと思いました。 まず適当なgulpfileが欲しかったのでYeomanでとってきました。 $ npm install -g yo $ npm install -g generator-react-gulp-browserify $ yoreact-gulp-browserify https://github.com/randylien/generator-react-gulp-browserify/ 適当なそれなりに書かれているg
Gulp - a modern approach to asset pipeline forRails developers … and check why 5600+Rails engineers read also thisGulp - a modern approach to asset pipeline forRails developersRails asset pipeline is one of things that makesRails great forcreatingsimple applications fast.It solves a big problem of serving our assets efficiently in both development and production environment. While being v
タスク管理 package.json にはパッケージの依存を書いて npm install するのが基本だけど、 タスクの管理をどうするかというのは、別途また考えないといけない。 自分はgulp が良いと思っているが、 grunt や jake や make を使う人もいる。 また、たくさんオプションをつければほぼ一つのタスクが実行できてしまう browserify, jsh/eslint, mocha などのコマンドを提供するツールもある。 そして、 npm にも一部それらをサポートする npm run 機能があるので、そこに Unix ワンライナーを書くこともできる。 今回は、「どのタスクツールが最良か」みたいな話ではなく、それらをどうやって実行するか、または npm との棲み分けとか構成の流儀について、最近良いと思っているやり方について書いておく。 各方針で問題点を書いていくが、
Just over a year ago I started usingGulp andcreated gulp-starter. The setup works great out of the box on projects that are unopinionated about assets.Rails, unfortunately, is very opinionated, andit's taken me a year of trial anderror to land on a solution that fully integrates aGulp-based asset pipeline withRails without compromising existing features or sacrificing speed, power, or flexi
$22.99 U.S. ISBN: 9781939902146 Second Edition Published September 2016 Developing aGulp.js EdgeJed Mao, Maximilian Schmitt, Tomasz Stryjewski, Cary Landholt, William LubelskiThis book will teach you everything you need to know aboutGulp, the open source and powerful streamingbuild system.gulp is not intended to be the kitchen sink, but a framework for leveraging custom and community built fea
定例の2周り遅れエントリ。Castoや、STORYBOARDSではtask runnerにGruntを利用していたのですが、glupも触ってみようということで使ってみました。 最近はnode.jsでちょっとしたツールを書いていたりすることが多く、そのテストにmochaを使って書いていたりするので試しにその実行のタスクをglupで書いてみることにしました。 まずは、glupのインストール。globalで入れてコマンドラインから叩ける様にします。 $ npm install -ggulp $gulp -v [19:28:32] CLI version 3.8.8 [19:28:32] Local version undefined 実際にgulpを使いたいプロジェクトに入って、プロジェクト直下にもインストールします。 $ cd project $ npm installgulp --sa
はじめに この記事はGulp.js（全俺） Advent Calendar 2014です。 前回のこれからはじめるGulp（6）：gulp-plumberとgulp-notifyを使ったデスクトップ通知でgulp-plumberとgulp-notifyを使ったエラー等のデスクトップ通知を試しました。今回はタスクに含まれるパスを整理しつつrequire-dirモジュールを使ったタスク単位のファイル分割を試します。 パスの整理 まずはパスの指定を整理しておきます。必須ではありませんが、何かと便利なPathモジュールも読み込んでおきます。Pathモジュールはファイルパスを扱うユーティリティが用意されており、パスの正規化やパスの中からディレクトリ部分・ファイル名の部分だけ取得するといったメソッドが用意されている便利なモジュールです。 Pathモジュールを読み込む Pathモジュールはnode.js
![[Gulp]これからはじめるGulp（7）：require-dirモジュールを使ったタスク単位のファイル分割](/image.pl?url=https%3a%2f%2fcdn-ak-scissors.b.st-hatena.com%2fimage%2fsquare%2f28ce70a4ba19573c729e61a380304d78f3fccffd%2fheight%3d288%3bversion%3d1%3bwidth%3d512%2fhttp%253A%252F%252Fwhiskers.nukos.kitchen%252Fassets%252Fimages%252Fogp.png&f=jpg&w=240)
この記事はIwate Developers Advent Calendar 2014の6日目の記事です。 Iwate Developers Advent Calendar 2014 - Qiita 記事の内容はというと、岩手にまったく関係ありません。 学生の頃はフロントエンドを軽視してクソコードを量産していたので、今の学生の方にこんな風に作り始めるといいよって紹介する感じで書きたいと思います。 はじめに 昨今のフロントエンド開発はとにかく複雑になってきていて、学習コストが半端なくなってきてます。angularとかbackbone.jsとか、最近ではreact+fluxなど、トレンドの移り変わりが激しいです。 またGruntやgulp.jsなどのタスクランナーの活用がフロントエンドでは欠かせなくなっていて、使ってないなら今すぐ導入すべき、とも言えます。 最近gulp.jsを使っていて、gu
概要gulpの入門記事を以下に書いて行きます。 目次gulpとはgulp samplegulp支える技術(Streamと並行性) grunt vsgulp どっち使う?gulp.jsとは いわゆるフロントエンド周りの task runnerbuild tool Gruntあるでしょ その通り いわば、Gruntの簡易版 去年位?出来た後発のtool 最近、blog記事も増えてきた 公式Page売り文句 複雑なtaskも管理し易く、simpleで、使うのが簡単 一時fileのdisk書き込みが無いので早くて能率的simpleで期待通り動くようにPluginのGuidelineがあるAPIが小さく学習時間かからない リソースgulp公式page 入門記事 クラスメソッドさんの入門記事 shuheiさんのqiita記事 sample多め anatooさんの入門記事 Shump
こんにちは、シニアアプリケーションエンジニアのid:taraoです。はてなエンジニアアドベントカレンダー2014の21日目として、依存先のファイルが更新されたらコンパイルしなおす処理をgulpで実現する方法について、とくにLessを例にとって紹介します。はてなでは、JavaScriptやCSSなどの静的ファイルをTypeScriptやLessなどからコンパイルして生成することが増えています。CSS(Less)は主にデザイナが書くため、コンパイル手順はできる限り簡単にする必要があります。多くのチームでは、サーバアプリケーションをローカル環境で実行している最中はファイルの変更に応じて自動的にコンパイルしなおすようになっています。 ファイルの更新監視からコンパイルまでの処理にはGruntなどを使ってきましたが、コンパイル対象のファイルに依存関係がある場合、依存先のファイルの変更に応じて依存元の
ちょっと前に触ったサービスでRailsサービスでgulpとかbrowserifyとかそのあたりのモダンなJSツールを使いたくて、こんな感じにやってみたというメモです。 おおまかにいうと、gulpでビルドしたものを、asset pipelineに通すというだけ。 こんなことを考えていた 最初はsprocketsをいっそのこと外してしまおうかと思ったんだけど、そのサービスはasset_syncというassetをS3にあげるgem使ってたのと、digestまわりとかあって、それらは解決できなくはないけど、めんどくせえからそこはsprocketsに任せてもいいやと思ったので、結局外しませんでした。 また、JSまわりのツールsprocketsと連携してたりするgemがあったりするんですが、JSまわりツールのバージョンアップの早さにgemがついていけてないと感じたので、我慢して古いバージョン使うのが嫌
Bowerとgulp-bowerでフロントエンド向けライブラリを管理するプログラミング (iOS,JavaScript, Jenkins, Sikuli) とMacやiPhoneなどの話題が中心のブログ Bowerとgulpを組み合わせて使うことでフロントエンド向けライブラリを管理できるようにしてみる、ということで、Bowerの簡単な使いかたとgulpでの利用方法について簡単に説明します。 なお、gulp自体の利用方法については、以前の記事「ビルドシステムgulpをCoffeeScriptで使ってみる」を参照ください。 Bowerの導入とパッケージインストール Bowerはnpmでインストールします。 npm install -g bower コマンドbowerの基本的な使いかたは、npmと同じです。まず、bower initで初期化しておきます。 > bower init [?] name: sample [?] version: 0.0.0 [?] de
相変わらず仕事ではデザインやりつつJavaScript書いている。 タスクランナーとしてGrunt.jsを使っていたけれども、使ううちに段々不満がでてきた。遅かったり、記述が冗長になりがちでつらかったので最近になってgulpに乗り換えた。gulpは良い。タスクは自動的に並列に実行され、かつストリームで処理されるので速いし、タスクの記述もストリームベースの書き方のおかげでGrunt.jsに比べるとだいぶ短くなる。 ただ、そこらにあるgulpをちょっと試しただけの日本語の記事やドキュメントをみてても実際のプロジェクトで使えるレベルまでの知識を得られず学習に一日かかった。 この記事では、gulpをまともに使えるようになるまでに必要な知識を書く。 導入とHelloWorld まずは導入。npmからgulpをインストールする。 $ npm installgulp -g $gulp -v [gu
何番煎じかわからないけど、gulpを使ってみたら中々良かったのでまとめてみます。gulp.jsとはgulp.js はフロントエンド用のタスクランナーってやつです。 同じタスクランナーの競合に Grunt がありますが、後発だけあってストリームを駆使して可読性の良い設定ファイルが書けます。 Gruntでできることは大体gulpでもできるので、どちらを使ったら良いかは好みの問題かも知れません。 この記事ではsassのコンパイルをするタスクと、関連してベンダープレフィックスを自動で付与するところまで紹介します。gulpのインストール npmコマンドでサクッと入れます。 $ npm install -ggulp これでgulpコマンドが使えるようになりました。gulpでsassのコンパイルをするgulpでsassをコンパイルするのに、こちらのプラグインを使います。gulp-ruby-
Task Runnerツールのgulpで、 タスクの設定はgulpfile.js という設定スクリプトを作って書くことになっています。 (任意のファイルを指定する場合は、コマンドライン引数の --gulpfile オプションで指定します)gulp/docs/getting-started.md at master ·gulpjs/gulp Task Runnerツールとして有名なGruntでは、設定ファイルをjs以外にCoffeeScriptをデフォルトでサポートしているため、 オブジェクトの入れ子がたくさんできる gruntfile をCoffeeScriptで書くという人も多いと思います。gulpでは、デフォルトでは js ですが、 --require オプションを使うことで任意のaltJSを使って、gulpfile を書くことが出来るようになっています。 (この場合のデフォ
Node学園祭・初参加 初参加だったんですが、ビギナー＆フロントエンド向けのNode.jsツール系セッションを担当させていただきました。なんかめっちゃ緊張した･･･。 参考リンク集 1. Package manager npm Bower npm とフロントエンドのパッケージ管理の未来 ::ハブろぐ The npmBlog — npm and front-end packaging Npm Tips · fiveisprime npmのあまり知られてない機能 10選 - fromscratch npm-shrinkwrap Bower Resolutions - Jake Trent 2. Task runner Grunt: TheJavaScript Task Runnergulp.js - the streamingbuild system Node.js の Stream
1リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
