JavaScript作業自動化ツール「Grunt 1.0.0」が登場。約2年もの開発停滞から復活 － Publickey

2016/04/05 229 users Publickey ビルドツール タスクランナー 復活 ベース

Webサイトやアプリケーション開発で発生する作業を自動化してくれるツール「Grunt」の正式リリースとなる「Grunt 1.0.0」が リリースされました 。 Gruntは、いわゆるビルドツールやタスクランナーと呼ばれるソフトウェアの1つで、Node.jsをベースにしたオープンソースとして開発されています。 JavaScriptで自動化したい作業を記述でき、また多くのプラグインによって一般的な作業... 続きを読む

Visual Studio Code は JavaScript 開発が超絶便利になる可能性を秘めている！ - てっく煮ブログ

2015/11/19 393 users Visual Studio Code 超絶 煮ブログ 開発

期待のオープンソース IDE、Visual Studio Code を試してみたら衝撃を受けた。 拡張を入れなくても、デフォルトで JavaScript の「自動 Lint」「Grunt、Gulp 連携」「デバッグ」が動いた。なんだかすごく便利そうな予感。 Windows 環境で起動してみたらこんな画面だった。 なんか黒いが、色は好みにカスタマイズできるし、プリセットからも選べる。 フォルダーを開... 続きを読む

JavaScriptタスク自動化のもう一つの選択肢、「gulp」の利用法 (1/3)：CodeZine（コードジン）

2015/11/06 59 users CodeZine Gulp ライブラリ 並列実行 HTML

本連載では主にHTML／JavaScript開発作業を効率化するさまざまなツールやライブラリを紹介します。今回取り上げるのはJavaScriptによるタスク実行ツール「gulp」です。すでに本連載では類似ツールのGruntを紹介していますが、gulpはメソッドチェーンによる直感的な記述や並列実行など、Gruntにはない特徴があります。記事ではサンプルを交えてgulpの特徴と利用法を説明します。 は... 続きを読む

ブラウザー上でスタイルガイドが作れるFrontifyを試してみた | Webクリエイターボックス

2015/09/24 123 users Gulp CSS Webクリエイターボックス ブラウザー上

巷ではgulpやGruntなどを使ったスタイルガイド生成ツールが多く存在します。しかし、CSSのコメントに書き込んだりするのはWeb制作者でないと難しい部分もありますし、そもそもファイルを作るのがめんどうだったり…と、なかなかスタイルガイドを作る気になれない人もいるんじゃないかと思います。今回は非Web制作者でも簡単にスタイルガイドが作れちゃうFrontify Style Guideを紹介します！... 続きを読む

Gulp + browserify + watchify + gulp-sass で自動高速コンパイル環境 | モンキーレンチ

2015/05/13 117 users Sass browserify Compass コンパイル

Gulp とは Gulp は Web 制作に関するいろいろな作業を自動化するためのツールです。Sass のコンパイルや Gulp の使用には node.js や Sass などのインストールが必要なので、ちょっと古い記事ですが下記を参考に適当にインストールしてみてください。 Grunt + Sass + Compassでつくるナウいフロントエンド開発環境 browserify とは そんなに詳しく... 続きを読む

makeのくびき - snyk_s log

2015/05/11 100 users Gulp くびき log Make 要約

2015-05-11 makeのくびき javascript 「gulpって何だよ、makeでいいじゃん（要約」論争について、私もちょっと一本講釈をぶってみることにする。あれやこれやといった実利的な話をするつもりはない。そういうものは既に書いた人がいるのでそちらを参照のこと。 Grunt/gulpについて述べると、トレンドの移り変わりが速いというのは半分正しくて半分間違っている。 Gruntの思い... 続きを読む

Node.js - フロントエンド開発の３ステップ（npmことはじめ） - Qiita

2015/04/11 349 users ウェブアプリ Qiita Gulp スライド node.js

以前、勉強会でLTしたものです。 スライドは下記にあります。 http://www.slideshare.net/hashedrock/ss-46539932 フロントエンド覚えること多すぎ問題 モダンなフロントエンド開発で、入門記事を探そうとすると、 まずgulpやgruntによるビルド環境構築から始まる記事が多くヒットします。 ですが、ほとんどの初心者が最初に書くウェブアプリは、 gulpやg... 続きを読む

webpack で始めるイマドキのフロントエンド開発 - Qiita

2015/04/05 319 users Webpack webapp Qiita ビルドツール 配布物

webpack とは webpack は WebApp に必要なリソースの依存関係を解決し、アセット（配布物）を生成するビルドツール（要するにコンパイラ）です。JavaScript だけでなく、CoffeeScript や TypeScript、CSS 系、画像ファイルなどを扱うことができます。 WebApp のビルドツールは Grunt や Gulp が有名です。これらは基本的に、ビルド手順をタ... 続きを読む

JavaScript - もうgulpで憔悴しない - 低依存gulpfileのレシピ - Qiita

2015/04/04 241 users Qiita Gulp Scripts 憔悴 要点

こんにちは、@armorik83です。皆さん、Grunt / gulp使ってますか。おなじみなので、ここでは説明はしません。 この記事の要点 なぜGrunt / gulpは憔悴に至るのか、経緯と問題点 npm run-scriptsの仕組みについて package.jsonにscriptsを羅列することに対する是非 シンプルなgulpfileについての提言 経緯 さて、先日このような記事が界隈で広... 続きを読む

Web作成の定形作業を自動化できるJavaScriptタスク実行環境Grunt （1/3）：CodeZine

2015/04/01 146 users CodeZine デプロイ コンパイル ライブラリ 本質

本連載では主にHTML／JavaScript開発作業を効率化する様々なツールやライブラリを紹介します。初回となる今回はHTML／JavaScript開発で発生する様々な定形作業を自動化してくれるツール「Grunt」について、利用例を交えて紹介していきます。 はじめに　HTML／JavaScript開発に限らず、一般にプログラミングの作業ではコンパイルや自動テスト、デプロイなど、開発の本質にあまり関... 続きを読む

Grunt/Gulpで憔悴したおっさんの話 - MOL

2015/03/27 431 users npm MOL タスク npm run Gulp

先人たちが1年前に通った道で、いろいろいまさらかよって話なんですが。基本的に以下の記事読んだら分かります。要はGulpとかGruntといったモノ使わずにnpm run hogehogeでビルドしよーぜって話です。 task automation with npm run オレ的Gruntに対する最新の気持ち - from scratch Node - npm で依存もタスクも一元化する How t... 続きを読む

これからはじめるGulp：bundler, rbenv, nodebrewでGulp環境を作ってみる #1 ｜ Developers.IO

2014/12/01 55 users Gulp nodebrew アドベントカレンダー 季節

これからはじめるGulp：bundler, rbenv, nodebrewでGulp環境を作ってみる #1 Gulp - Solo Advent Calendar 2014 はじめに 今までGruntばかり使って来て、そろそろGulpも使っておこうということで、Wordpressテーマを作るついでに勉強したことをメモしていきます。12月ということで、アドベントカレンダーの季節ですが、他の方が主催し... 続きを読む

ASP.NET 5 と Visual Studio 2015 では Bower と Grunt が標準になるみたいなので勉強してみた - しばやん雑記

2014/11/25 72 users npm BOWER ＡＳＰ しば 雑記

2014-11-25 ASP.NET 5 と Visual Studio 2015 では Bower と Grunt が標準になるみたいなので勉強してみた ASP.NET Visual Studio JavaScript ASP.NET 5 と Visual Studio 2015 Preview では Bower と Grunt、そして npm へ標準で対応するようになりました。今後は ASP.... 続きを読む

npm で依存もタスクも一元化する - Qiita

2014/11/16 248 users npm Qiita package.json Gulp タスク

タスク管理 package.json にはパッケージの依存を書いて npm install するのが基本だけど、 タスクの管理をどうするかというのは、別途また考えないといけない。 自分は gulp が良いと思っているが、 grunt や jake や make を使う人もいる。 また、たくさんオプションをつければほぼ一つのタスクが実行できてしまう browserify, jsh/eslint, m... 続きを読む

GruntでSassのビルドとjsファイルの結合・圧縮を自動化 - bata's log

2014/08/06 58 users Sass ビルド 結合 圧縮 JavaScript

2014-08-06 GruntでSassのビルドとjsファイルの結合・圧縮を自動化 ツール JSファイルの結合と圧縮を自動化したくて色々調べていたのですが、やはりGruntが一番便利だということで導入してみたました。 結論からいうと、もっと早く導入すればよかった。 Gruntの導入 導入部分は下記を参考に。 Windowsの場合 http://webdrawer.net/javascript/f... 続きを読む

gulpとかnpmのこととか by A Memorandum

2014/07/30 90 users npm Gulp 鵜呑み そこら辺 原因

最近、Gruntからgulpに切り替え始めている人が増えている気がします。この数ヶ月でいろんなブログなんかでも導入記事が増えてるようですが、ひとつ言っておきますと「数ヶ月前の記事は鵜呑みにしてはいけない（というか、そのままだと動かないこともありうる）」かな〜、なんて。 あれがどうしたこうしたと質問を受けたりするんですが、いろんな人がはまってる原因はそこら辺にある気がしてならないのですよね。そんなわ... 続きを読む

「gulpってどうなの？」に対する返答 | じまぐてっく

2014/07/22 83 users Gulp 所感 タスク 返答 テンプレート

Gruntを使ってる人に「gulpってどうなの？」と聞かれる機会が最近何回かあったので、いまさらながら自分の所感を交えて答えてみる。 まず、自分がこれからプロジェクトを始めるとしたらgulpを使うでしょう。理由は質問に答えながら書いていきます。 Grunt使い続けちゃだめなの？ そうですね。あなたがGruntに十分慣れていて、タスクのテンプレートがあってすぐに開発に入れるならGruntを使い続けて... 続きを読む

プレゼン･ポスターには游ゴシックやヒラギノがオススメ - kurotei datebook

2014/07/07 84 users ヒラギノ Twitter 游ゴシック エントリ プレゼン

2014-07-07 プレゼン･ポスターには游ゴシックやヒラギノがオススメ どうも、くろていです。最近は筋トレとデザインが忙しくてあまりエントリを書けていません。Gruntも途中までしか書いてません。ところで、昨日フォントについてTwitterで少し話すことがあり、他の人にも知って欲しかったので簡単にまとめました。タイトルはまとめられませんでした。 始めに フォントは本当に無数にあるわけですが、た... 続きを読む

Gruntで始めるWeb開発爆速自動化入門（終）：あなたのWeb開発人生を変えるYeoman、Bower、Yoのインストールと使い方 (1/3) - ＠IT

2014/07/02 373 users npm BOWER Yeoman npmモジュール 連載目次

連載目次 前回記事「Gruntで独自タスクを定義し、独自プラグインをnpmモジュールとして作成・公開するには」では、Gruntを使っていろいろな手法でタスクを定義する手法や、独自プラグインを作成してnpmで公開する方法について解説しました。 今回は少し角度を変えて、Gruntを自身の機能として利用しており、快適な開発ワークフローを提供してくれるツール、「Yeoman」について解説します。 3つのツ... 続きを読む

rails と bower を組み合わせて assets を良い感じに使う術 - HsbtDiary(2014-06-17)

2014/06/17 65 users assets Rails HsbtDiary BOWER

rails と bower を組み合わせて assets を良い感じに使う術npm と bower と grunt を使って javascripts のテストに必要なライブラリをインストールするようにした by hsbt · Pull Request #414 · tdiary/tdiary-core で導入した npm, grunt, bower の組み合わせで javascript/css を... 続きを読む

ビルドツールまとめ。GruntとかGulpとか (フロント寄り) - Qiita

2014/05/07 221 users Gulp Qiita Guard GitHub 活況

はじめに そろそろ、使っていないと後ろ指をさされそうな雰囲気になってきた、ビルドツール各種ですが、業界(?)の全体像をなんとなく眺めてみたいと思います。動きとしてはRuby界隈が早く、Guardが2010年あたりから、それを参考にする形でGruntが出てくるのが2011年、Gulpについてはまだ1年未満という状況ですが、特にJavaScript周りは活況です。 下記、主にGitHubの各種数値を並... 続きを読む

Grunt + TypeScript + Middleman によるフロントエンド開発環境を作ってみる ｜ Developers.IO

2014/04/30 145 users TypeScript Middleman Sinatra

Middleman を使うようになってしばらく経ちますが、2014年4月現在 TypeScript に対応していないというのがどうも気になります。Ruby on Rails や Sinatra といった他の Ruby 製フレームワークと同様、Middleman が対応している Alt JS は CoffeeScript のみです。 CoffeeScript は機能が軽量であることから学習コストが低... 続きを読む

GRUNT のあんなこといいなできたらいいな // Speaker Deck

2014/04/26 66 users Speaker Deck

All slide content and descriptions are owned by their creators. 続きを読む

grunt - 【AngularJS】テンプレート（.html）を1ファイルにまとめたい！ - Qiita

2014/04/25 64 users Qiita AngularJS directive HTML

grunt-angular-templates GruntでJSやCSSをビルドするとき， ひとつにまとめて（concat） ちっちゃくして（uglify，cssmin, htmlmin） 少しでもページの読み込みを軽くしようとします，が…． AngularJSでDirectiveやng-includeする用のテンプレートファイル（.htmlファイル）はどうしたらいいの？( ﾟдﾟ) 「jsファイ... 続きを読む

CSSスプライトを生成する「grunt-spritesmith」 - to-R

2014/04/07 98 users src CSSスプライト to-R コマンド インストール

grunt-spritesmithはCSSスプライトを生成するGruntモジュールです。 Gruntの基本的な使い方は「Gruntで始めるWeb制作の自動化 - to-R」を参照に。 grunt-spritesmithのインストールは以下のコマンドです。 npm install grunt-spritesmith --save-dev Gruntfile.jsの内容は以下のようにします。srcで個... 続きを読む