npm で依存もタスクも一元化する - Qiita
タスク管理 package.json にはパッケージの依存を書いて npm install するのが基本だけど、 タスクの管理をどうするかというのは、別途また考えないといけない。 自分は gulp が良いと思っているが、 grunt や jake や make を使う人もいる。 また、たくさんオプションをつければほぼ一つのタスクが実行できてしまう browserify, jsh/eslint, mocha などのコマンドを提供するツールもある。 そして、 npm にも一部それらをサポートする npm run 機能があるので、そこに Unix ワンライナーを書くこともできる。 今回は、「どのタスクツールが最良か」みたいな話ではなく、それらをどうやって実行するか、または npm との棲み分けとか構成の流儀について、最近良いと思っているやり方について書いておく。 各方針で問題点を書いていくが、
なぜ僕は(2015年のフロントエンドで、makeではなく)gulpを選ぶのか - mizchi's blog
http://d.hatena.ne.jp/m-hiyama/20150511/1431306678 の件 最初に 僕もgulpが今後生き残るかというと、かなり懐疑的です。開発パラダイムに合わせて変わっていくで、来年の段階で自分はgulp使えないなといっている可能性は十二分にあります。そのタイミングの一つはES6 import がHTTP2で並列ロードのオーバーヘッド無しで解決されるようになるタイミングでしょう。 根本的な問題として、Web周りは標準化の関係で動きが遅いです。最新の仕様ではままならず、ブラウザ間の実装がまちまちで、また開発上の要求が多様なのでプリプロセッサで解決する文化が根付きました。プリプロセッサがいらなくなるぐらい個々の標準が洗練されればプリプロセッサも不要になりますが、そのような未来は、今の動きをみるに、あと15年は来ないように思えます。 とはいえ、ただひとつ言えるの
http://ipestov.com/essential-plugins-for-gulp/
See related links to what you are looking for.
Yahoo! JAPAN Creative Blog — 「SCRIPTY#1 」の資料を公開します #scripty01
先日弊社にて、「SCRIPTY#1〜フロントエンド紳士・淑女のための勉強会〜」を行いました。 その際に発表させていただいた資料を公開いたします。 遠方の方や、ご都合によりご参加いただけなかった方はぜひご覧ください。 なお、当日はグラフィックレコーディングがなされ、発表内容がリアルタイムに可視化されていました。 そちらの内容も併せてお楽しみいただければと思います。 発表セッション 1.本当にあった怖いCSS 〜BEMのすすめ〜 発表者：小川 健史 実務で実際に遭遇した怖いCSSと、解決策の一つとして、 BEMを導入し得られた知見について発表しました。 発表スライド： http://i.yimg.jp/images/creativeblog/140916/takogawa.pdf グラフィックレコーディング 2.backbone.js 光と闇 発表者：柴田 和祈 Backbone.jsとそのプ
ビルドツールまとめ。Gruntとかgulpとか (フロント寄り) - Qiita
はじめに そろそろ、使っていないと後ろ指をさされそうな雰囲気になってきた、ビルドツール各種ですが、業界(?)の全体像をなんとなく眺めてみたいと思います。動きとしてはRuby界隈が早く、Guardが2010年あたりから、それを参考にする形でGruntが出てくるのが2011年、gulpについてはまだ1年未満という状況ですが、特にJavaScript周りは活況です。 下記、主にGitHubの各種数値を並べています。コミュニティの盛り上がりや成熟度の判断の参考として。 名称 環境 設定ファイル 可読性 GitHub プラグイン Issues 初コミット
タスクランナーgulp.js最速入門 - id:anatooのブログ
相変わらず仕事ではデザインやりつつJavaScript書いている。 タスクランナーとしてGrunt.jsを使っていたけれども、使ううちに段々不満がでてきた。遅かったり、記述が冗長になりがちでつらかったので最近になってgulpに乗り換えた。 gulpは良い。タスクは自動的に並列に実行され、かつストリームで処理されるので速いし、タスクの記述もストリームベースの書き方のおかげでGrunt.jsに比べるとだいぶ短くなる。 ただ、そこらにあるgulpをちょっと試しただけの日本語の記事やドキュメントをみてても実際のプロジェクトで使えるレベルまでの知識を得られず学習に一日かかった。 この記事では、gulpをまともに使えるようになるまでに必要な知識を書く。 導入とHelloWorld まずは導入。npmからgulpをインストールする。 $ npm install gulp -g $ gulp -v [gu
ブラックなWeb開発現場の救世主、Gruntのインストールと使い方
連載目次 一昔前であれば、HTML／JavaScript／CSSを使用してWebアプリを作成する場合、（筆者の経験では）所定の位置にファイルを置くだけでした。最近はHTML／JavaScript／CSS関連の技術も複雑化／多様化し、いろいろなことを考慮しなければなりません。 例えばJavaScriptファイルの場合は、以下の作業を行うこともあるでしょう。 minify（圧縮）や結合 単体テストの実行 JSLint（構文チェック）の実行 さらに、CoffeeScriptやTypeScriptを使用している場合にはコンパイル（JavaScript変換）を行う必要もあります。 また、SCSS（Sass）やLESSなどのCSS拡張メタ言語を使用している場合にも、コンパイル（CSS変換）作業が必要です。 ファイルを修正してビルドするたびに、これらの作業をいちいち手作業で行っていては非常に面倒でしょう
CoffeeScriptやSassなどの使用時にオススメのGruntプラグイン一覧
連載目次 前回の記事「ブラックなWeb開発現場の救世主、Gruntのインストールと使い方」では、Gruntについての概要とセットアップ、基本的な動作を確認してみました。 今回は、Gruntで使用できるいろいろな「プラグインモジュール」（以下、プラグイン）をインストールし、実際に動かして動作を確認してみましょう。 Gruntのプラグインとは、何ができるのか 前回の繰り返しになりますが、プラグインを使用すると、Gruntでいろいろなタスクを実行できるようになります。実行できるタスクの内容はプラグインによってさまざまですが、幾つか例を挙げると、下記のような作業が自動化できます。 CoffeeScript／TypeScriptをJavaScriptへコンパイル（変換） SCSS（Sass）／LESSをCSSへコンパイル（変換） ファイルの圧縮／結合／最適化 JSHintでJavaScriptの構文
「今どきのGruntを使ったフロントエンド開発（HTML/CSS編）」HTML5 Conference 2013 セッションレポート
「今どきのGruntを使ったフロントエンド開発（HTML/CSS編）」HTML5 Conference 2013 セッションレポート 出口 達也 2013年11月30日（土）に開催された「HTML5 Conference 2013」の、株式会社サイバーエージェント・石本光司さんによるセッション「今どきのGruntを使ったフロントエンド開発（HTML/CSS編）」の内容をご紹介します。 なお、セッションのターゲットはGruntを使ったことのないHTML/CSSコーダーやWebデザイナーさんです。 なぜGruntを使うのか Gruntとは、JavaScriptで書いたタスクを実行してくれるアプリケーション（JavaScript Task Runner）です。 Webアプリケーションの開発が複雑になってきて、CoffeeScript、Sassなどのコンパイルが必要な技術を使うことが多くなってきた
フロントエンドの開発環境(sass,compass,grunt) | Bootgraph Blog
こんにちわ。 Bootgraphでフロントエンド開発を担当している阿部です。 快適なフロントエンド開発を行うためにはどのような環境が適しているのでしょうか。 今回の記事ではベストな開発環境(2014.1時点の主観)をまとめました。 Bootgraphにおけるフロントエンド開発は今回記事の内容で統一しています。 まとめようと思った経緯 タスク管理ツールやパッケージ管理ツール、各言語のプリプロセッサなど、日進月歩でどんどん便利なものが出てきます。（ありがたい限りですmm） そこで、2014.1時点におけるベストな環境をまとめてみようと思いました。 新しくて便利なものがどんどん出てくるので、開発環境は随時更新していきたいと思います。 整理した開発環境 https://github.com/es335ab/front_dev_env git clone git@github.com:e
Maintainable Gruntfile.js - from scratch
さてさて、前回の続きです。 オレはgruntのエコシステムに乗って楽をしたい、でもGruntfile.jsが長くなりすぎて辛い、grunt taskが時間がかかりすぎて辛い、という話は話で分かります。また、それに対する色んな解決策もあります。 最近出た、HTML5Rocksで紹介されてたやり方もあるし、いくつか先人の知恵もあるので、解決していきましょう。 Gruntfile.jsが長くなりすぎて辛い時 https://github.com/firstandthird/load-grunt-configを使いましょう。 いろんなtipsを見てきましたが、このライブラリが一番分かりやすく、かつGruntfile.jsをメンテナブルに保つことができます。 load-grunt-configには3つの機能があります。 grunt pluginの自動ロード機能 grunt configのファイル分割
ぼくがかんがえたさいきょうのGruntfileを晒してみる - Qiita
開発中とリリースビルドをわけて考える。 開発中はとにかく速度重視。テスト重視。 リリースビルドのほうに、自動化できる便利なタスクを出来るだけ突っ込んでおく。 開発中に使用するソースファイルから、リリースビルドに余計なファイルを混ぜない。 こんな考え方でGruntfileを書いてみました。 プロジェクトごとに最適化したGruntfileを作るということも魅力的な挑戦なのですが、私は開発者一人で短納期な案件をいくつもこなさないといけないので、そのために導入したタスクランナーのはずなのにGruntfileの開発やメンテに時間を取られるのは本末転倒になってしまうので、出来る限り汎用的に使えるように気をつけて書きました。 さらに何か特定の開発スタイルやフレームワークに依存しないように、特殊なディレクトリ構成などを必要としない点も気を付けました。 普段は開発は私一人ですが、デザイナーやコーダーや開発者
オレ的Gruntに対する最新の気持ち - from scratch
Gruntについて最新の気持ち ::ハブろぐ 上記のブログエントリを読んで非常に今自分が感じていることと共通点を感じました。 Gruntに対する最新の気持ちでは2つの問題提起がされてました。 1. Gruntfile.jsが長すぎる(700行とか) 2. そもそも全部gruntでやらなきゃいけないのか 1.に関しては色んな解決手段があります、ブログの筆者も解決されているようですし、この件に関しては次回のMaintainable Gruntfile.jsで触れます。 最初は2.に関しての、全部gruntでやらなきゃいけないんだっけ、という疑問に関してです。 僕も同じ思いをしてたので、同調してブログを書きます。 gruntについて 言わずと知れたタスクランナーですね、gruntを使うとjavascriptのminifyやmeta cssのコンパイルといったフロントエンドにありがちな作業を自動化
Bookmarklet作るのにYeoman使ってみる - Qiita
作ったのは超単純なこれ。 Layzie/make-md-link 最近Markdown使って資料作ってて、URLとかを集めるのにリンクとタイトルをMarkdown形式で貼りたいわーと思って、5分くらいで作った。 これ作るのに、Yeoman使ってみたというレポートです。 まずはYeoman入れてない人は入れてください。 あとyeoman-generatorっていうnpmが色々あるんですが、その中のgenerator-bookmarkletを導入。 $ mkdir test_bookmarklet; cd test_bookmarklet $ yo bookmarklet create Gruntfile.js create package.json create .jshintrc create .gitattributes create .gitignore create app/main
Yeoman入門(第一部、yoを使う) - from scratch
※ 追記： id:TokyoIncidents さん"補足"の誤字修正しました、ありがとうございます!! これからYeomanに関して説明していきます。 Yeoman自体が何者なのかよくわかっていない人も多いと思います。また、ある程度Yeomanの概要は知っているので、generatorの作り方が知りたい、という方もいると思います。今回は三部構成で、yeomanを使う話、yeomanのgeneratorを作る話、最後にyeomanのAPIに関して説明していきます。今回は第一部のyeomanを使う話について説明します。 Yeomanとは Google社が作成した総合開発ツール群です、「ヨーマン」と呼びます。公式サイトには MODERN WORKFLOWS FOR MODERN WEBAPPS (モダンWEBアプリケーションのためのモダンワークフロー) と記述されています。 Yeomanを使う
Build Wars: Gulp vs Grunt
A brief history of Grunt I realized that a task-based build tool with built-in, commonly used tasks was the approach that would work best for me Ben Alman March 2012 Single, global Grunt: $ npm install -g grunt Configuration over code grunt.initConfig({ lint: { src: 'src/<%= pkg.name %>.js' }, concat: { src: [ '<banner:meta.banner>', '<file_strip_banner:src/<%= pkg.name %>.js>' ], dest: '<%= pkg.n
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GRUNT のあんなこといいなできたらいいな
NameBright - Domain Expired
捗るかもしれないフロントエンド開発環境
use-init.com