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 環境で起動してみたらこんな画面だった。 なんか黒いが、色は好みにカスタマイズできるし、プリセットからも選べる。 フォルダーを開... 続きを読む

ブラウザー上でスタイルガイドが作れる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... 続きを読む

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

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

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

ビルドツールまとめ。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 は機能が軽量であることから学習コストが低... 続きを読む

【個人メモ】bespoke.jsを使ってプレゼン資料を作成する - Qiita

2014/03/28 157 users Qiita オサレ プレゼン かっこいい Bespoke.js

なんだこのプレゼンは？ と思ったプレゼンをネット上で見かけた。 Build Warsへのリンク JavaScriptのプロダクトをうまい具合にビルドするためのツール、 Gruntとglupを比較したプレゼンだ。 gifアニメが多用されてるし、オサレでカッコイイ。 何使ってこのプレゼン作ってるんだ！？と思って調べてみたら、 このプレゼンの作者が自分で作っていた。 bespoke.jsというアプリだっ... 続きを読む

Gruntを使ってプロジェクトを自動化する、Myタスクメモ | tipsBear

2014/03/12 289 users Sass tipsBear 結合 タスクメモ うち

Sass/Copmpassのコンパイル・cssとjsの結合と圧縮・liveReload・Autoprefixer・CSSのプロパティソート・jshint・CSSスプライトに対応した、Gruntのタスクメモです。Gruntで出来ることはたくさんありますが、今回ご紹介するのは私がよく使うGruntの設定のメモになります。メモなのでそのうち追加されたりする…かもしれません。 ちなみに、Gruntの導入方... 続きを読む

Gruntで始めるWeb開発爆速自動化入門（1）：ブラックなWeb開発現場の救世主、Gruntのインストールと使い方 (1/2) - ＠IT

2014/03/04 605 users ビルドツール BOWER Yeoman IDE エディター

Gruntで始めるWeb開発爆速自動化入門（1）：ブラックなWeb開発現場の救世主、Gruntのインストールと使い方 (1/2) JavaScriptメインでWeb開発を行う際にさまざまな作業を自動化して開発効率を爆発的に高めるツール（Grunt、Yeoman、Bowerなど）やエディター、IDE、実行環境などを紹介していく連載。初回は主なビルドツールを紹介し、Gruntの概要と特長、環境構築の仕... 続きを読む

オレ的Gruntに対する最新の気持ち - from scratch

2014/02/19 101 users Gruntfile.js from Scratch 共通点

2014-02-19 オレ的Gruntに対する最新の気持ち node.js,grunt Gruntについて最新の気持ち ::ハブろぐ上記のブログエントリを読んで非常に今自分が感じていることと共通点を感じました。Gruntに対する最新の気持ちでは2つの問題提起がされてました。1. Gruntfile.jsが長すぎる(700行とか) 2. そもそも全部gruntでやらなきゃいけないのか1.に関しては色... 続きを読む

Gruntに置き換わるか？新生ビルドシステム「gulp」v3.5.2入門 | REFLECTDESIGN

2014/02/07 241 users REFLECTDESIGN Gulp ビルドシステム 側面

みなさんご存知「Grunt」は、WEB制作者の間でも以前に比べるとだいぶ浸透してきているようで、実際に案件で使用しているという方も増えてきています。そんな中、ここ最近海外のエンジニアの中でGruntに変わって使われだしている新たなビルドシステム「gulp」をご紹介します。 Grunt vs gulp Gruntは、設定ファイルGruntfileがJSON形式で書けるという側面から一見わかりやすく見... 続きを読む

コピペが出来るなら誰でも出来る、Web制作タスク自動化ツール「Grunt」導入手順 | OZPAの表4

2014/02/05 553 users OZPA ちき コピペ コーダーさん 導入手順

なんだか、Web制作の際に起こる様々な面倒くさいタスクを自動化してくれるGruntというツールがあるらしく、私の周りのWebデザイナーさんやコーダーさんがこぞって導入されておりました。 はじめは「へぇ…あちきは別に興味ないからいいでありんすよ」と指をくわえて傍観していたのですが、便利便利の声を聞くにつれやっぱり羨ましくなってきました。だから導入した。使った。良かった。 そんな訳で今回は、Grunt... 続きを読む

Web デザイナーさん向け Grunt を使った コーディング作業の効率化、はじめの一歩 | WWW WATCH

2014/01/24 462 users CSS はじめ WWW WATCH HTML コーディング作業

Grunt の導入記事なんか珍しくもないし、色々な方がわかりやすい記事を過去にも書かれていているので今さらではありますが...... とはいえ、まだ使ったことがない人もいるだろうということで、「Grunt って何ですか？」 とか「使ってみたいけどよくわからない......」 なんていう Web デザイナー （主に HTML や CSS を書くフロントエンドな人） さん向けに、初めて Grunt を... 続きを読む

「今どきのGruntを使ったフロントエンド開発（HTML/CSS編）」HTML5 Conference 2013 セッションレポート | HTML5Experts.jp

2013/12/26 116 users CSSコーダー ターゲット HTML セッション CSS編

2013年11月30日（土）に開催された「HTML5 Conference 2013」の、株式会社サイバーエージェント・石本光司さんによるセッション「今どきのGruntを使ったフロントエンド開発（HTML/CSS編）」の内容をご紹介します。 なお、セッションのターゲットはGruntを使ったことのないHTML/CSSコーダーやWebデザイナーさんです。 なぜGruntを使うのか Gruntとは、Ja... 続きを読む

Gruntのtaskの実行にかかる時間を劇的に短縮する方法 - Qiita [キータ]

2013/12/20 101 users Issue キータ task Qiita フロントエンド開発

最近ではGrunt無しでのフロントエンド開発は考えられなくなってきた気がしますが、大抵taskを実行した際に結構時間がかかってしまいます。 Gruntの実行にかかる時間を減らすにはどうすれば良いのか調べてみたら、loadTasks as they are needed to speed up Grunt load time · Issue #975 · gruntjs/gruntのissueに方法... 続きを読む

今どきのGruntを使ったフロントエンド開発（HTML/CSS編） — MOL

2013/12/01 353 users りんど Sass CSSプリプロセッサ MOL コンパイル

SassなどのCSSプリプロセッサを使うWebデザイナが増えてきました。Sassをコンパイルするだけなら黒い画面（ターミナル）を使わずともGUIアプリからの利用で問題ありません。が、ここは一歩踏み込んでGrunt（JavaScript製のタスクランナー）を使って、Sass以外のコンパイルやライブリロード、画像最適化、CSSのリントやスタイルガイド生成など、あらゆる作業をGruntに任せてより効率的... 続きを読む

MacでWebサイトデザイン・コーディングするための、黒い画面と仲良くなりながらの環境構築手順メモ | Gatespace's Blog

2013/10/31 165 users Gatespace's Blog Mac 黒い画面 覚え書き

タイトル長いですが。 これまでGUIアプリで操作してきたことをコマンドラインで操作出来るようにするMacでのセットアップメモ。 いつも忘れるので、現時点での覚え書きです。 自分の手順だけをざっくり書くので、わからなかったりエラーが出たらその内容で検索して調べてください。 やることリスト Xcode（iPhoneやiPadのエミュレーターなど） Homebrew（パッケージ管理ツール） Grunt（... 続きを読む