フロント界隈で一番イケてるのは AngularJS でも React でもなく Riot.js だという話 | phiary

2016/06/01 701 users AngularJS React phiary Webpack

10年のツケを支払ったフロント界隈におけるJavaScript開発環境（2016年4月現在）。 - 日々、とんは語る。 あのライブラリは何故誕生したの?のまとめ - Qiita ここ最近話題になったエントリーですが, どちらも今最もイケてる Riot.js について全く触れられてなくて悲しくなったので書きました. はじめに 「webpack インストールしといてー」, 「gulp 導入して wat... 続きを読む

JavaScriptを劇的に教えやすくするWebサーバ作りました - Qiita

2016/07/16 433 users Qiita rollup Babel Sass Webpack

近年、JavaScriptでコードを書こうとすると、お膳立て7割、コード書き3割みたいな事態がざらにあります。「お膳立て」の例としては、Gulp, Babel, Sass, PostCSS, WebPack, Rollup, Browserifyほか数限りなく。 たしかに、一旦フロントエンド開発に慣れてしまえば、お膳立てにかける時間は短縮することが可能です。でも、これを初学者に強いるのはツラすぎる... 続きを読む

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

2015/03/27 431 users npm MOL タスク Grunt 依存

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

Webサイト制作におけるフロントエンドの必須スキル＆開発環境はこれで決まり！ - North-Geek

2016/04/22 428 users North-Geek Git Sass Emmet 流行

最近フロントエンドの流行がどうのこうのという記事をよく目にしますが、実際に現場で 必要となるスキルと開発環境 を紹介していきます。これくらい知っていると全く問題ない。といったことですね。 主にWebサイトを制作のスキルは、 HTML・CSS、CSS3、Sass、SublimeText、Emmet、gulp、Git についてのスキルがあれば開発がしやすく流行の開発環境ではないかと思います。 さて、そ... 続きを読む

エンジニアがいい感じにフロントエンド開発を爆速化できる環境構築の手順 | 株式会社LIG

2015/02/03 395 users 爆速化 株式会社LIG エンジニア 手順 フロントエンド開発

今年もHTML5 Minutesに登壇してきました。こんにちは、先生です。 当日は「フロントエンド開発スピードをあげるための環境を作ってみた話」をしてきました。 今回はその環境を使ってみるまでの手順を書いていきたいと思います。 必要なものをインストール NodeJS Gulp WebPack Bower PhantomJS NodeJSとGulpのインストールは過去の記事「Gulp.js入門 – ... 続きを読む

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

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

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

タスク自動化ツール「gulp」 を使って制作時間を短縮しよう | Webクリエイターボックス

2014/12/24 371 users Sass コンパイル CSS タスクランナー 結合

みなさん、タスクランナーを使っていますか？タスクランナーとはファイルの圧縮やSassのコンパイルなんかを、ファイルを保存したと同時に自動で行なってくれる素敵ツールです。制作のスピードアップも間違いなし！今回はそんなタスク自動化ツールのひとつ、gulpを紹介します。 gulpとは gulpとは、Node.jsを使ったタスク自動化ツールです。CSSやJavaScriptファイルの圧縮や結合、Sassの... 続きを読む

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

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

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

開発に便利なタスクランナー「gulp」で出来る事、導入方法などをまとめました - YATのBLOG

2015/09/10 335 users YAT 記述 学習コスト 導入コスト タスクランナー

WEBデザインをする上で必要な知識・情報・技術等の記述や、参考になるサイトの紹介等を掲載しています。0 タスクランナーの一つであるgulp（ガルプ）。使い出すとすごく便利で今ちょっと手放せない開発ツールの一つなんですが、使ってない人からすると、導入コストとか学習コストが気になって、まだ手を出してないという方もいますよね。なので、今回導入用の記事を書いたので、ちょっと気になってるという方、試してみた... 続きを読む

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

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

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

gulp なしの Web フロントエンド開発 | アカベコマイリ

2015/08/04 289 users package.json npm タスク フロントエンド開発

Web フロントエンド開発において gulp は非常に便利だ。一方、あまりにも gulp に依存しすぎており、これなしで開発できるだろうか？という不安もある。 というわけで、gulp を利用せず package.json と npm だけで同等の機能を実現する方法を検討してみた。 参考記事 Qiita npm で依存もタスクも一元化する MOL Grunt/Gulpで憔悴したおっさんの話 Keit... 続きを読む

最近のビルドツールって何なの？ - 檜山正幸のキマイラ飼育記

2015/05/11 248 users ビルドツール ビルドプロセス 檜山正幸 キマイラ飼育記 備忘

雑記／備忘 | 10:11 | TypeScriptでは、コンパイルが必要です。プログラムをブラウザーとNode.jsの両方で使おうとすると、さらに加工が必要です。ミニファイだの文書も作るだのすると、ちょっとしたビルドプロセスとなるので手作業では辛くなります。今更Makeでもないよなー、と思い、最近のビルドツールを試してみました。内容： 流行りすたりが激しすぎる gulpを使ってみる：こんなサンプ... 続きを読む

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

2014/11/16 248 users npm Qiita package.json Grunt 依存

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

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

2015/04/04 241 users Qiita Scripts package.json 憔悴

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

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

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

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

Markdown で記述した API ドキュメントからお手軽にドキュメントサーバーとモックサーバーを生成する – Gulp で作る Web フロントエンド開発環境 #7 | NET BIZ DIV. TECH BLOG

2015/08/31 235 users iOS Markdown サーバーサイド SPA 従来

Markdown で記述した API ドキュメントからお手軽にドキュメントサーバーとモックサーバーを生成する – Gulp で作る Web フロントエンド開発環境 #7 SPA 開発によるサーバーサイドとフロントエンドの完全分業化 Single Page Application ( 以下、SPA ) は従来のサーバーサイドレンダリングを基とした Web アプリケーションと異なり、iOS アプリや ... 続きを読む

gulp - デザインワークをGitに含めるべき? 含めないべき? - Qiita

2015/02/15 230 users デザインワーク Git Qiita

「プログラマ業界」であればコンパイラの多くがオープンソース化されていますが、デザインツールはAdobeを筆頭に今もほとんどがプロプライエタリなツールです。そのことが、原理原則に沿うのを難しくしています。 複製不可能な部分に価値を置くという文化的な面 ツール開発にコストがかかるという金銭的な面 もあって、ツールがオープンに向かうことは当面なさそうです。Blenderという例外はありますが、Gimpや... 続きを読む

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

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

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

現場で使えるgulp入門 - gulpとは何か | CodeGrid

2014/10/18 203 users CodeGrid 現場

続きを読む

まずは「gulp」を動かしてみよう！ ～セットアップとはじめてのタスク実行 （1/4）：CodeZine

2014/08/20 180 users CodeZine タスク実行 セットアップ

gulp.jsって何?　最近ではWeb制作でも、LESSやCoffeeSriptなどの利用増加で「コンパイル」が必要なケースが増えています。そんなとき、 LESS: lessc CoffeeScript: coffee ……などなど これらのコマンドを使えば一つ一つのコンパイルはできるのですが、コマンドを覚え、毎回オプションを指定するのは面倒です。さらに、ファイル生成のこんなケースを考えてみます。... 続きを読む

MEANスタックで始めるWebアプリ開発入門（2）：いまさら聞けないNode.jsの基礎知識とnpm、Gulpのインストール (1/2) - ＠IT

2015/01/13 130 users npm MEANスタック サンプルアプリ LAMP 連載目次

連載目次 前回から始まった「MEANスタックで始めるWebアプリ開発入門」ですが、第1回、「LAMPに代わる構成として注目のMEANスタックの基礎知識とインストール、ひな型作成」では、MEANスタックの概要について説明とセットアップ、サンプルアプリの作成を通して最初のMEANスタックアプリに触れてみました。 今回からはMEANスタックの各構成要素についてもう少し詳細な解説をしていきます。第2回とな... 続きを読む

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

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

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

MEANスタックで始めるWebアプリ開発入門（3）：Node.jsのMVCフレームワーク「Express」の基礎知識とインストール (1/3) - ＠IT

2015/03/04 120 users MEANスタック npm MVCフレームワーク セッティング

連載目次 前回の「いまさら聞けないNode.jsの基礎知識とnpm、Gulpのインストール」において、サーバーサイドJavaScript実行環境であるNode.jsについて基本的な説明を行いました。また、その周辺ツールであるnpm、Gulpを含めた環境のセッティングも行い、Node.jsを用いてMEANスタックアプリ開発ができる状態になったと思います。 本記事では上記環境を用いて説明していくので、... 続きを読む

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

2015/05/13 117 users Sass browserify Grunt Compass

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

npm + gulp + bower でビルド自動化 - GeekFactory

2014/07/01 113 users npm GeekFactory BOWER ボトルネック 配置

2014-07-02 npm + gulp + bower でビルド自動化 JavaScriptやCSSのビルドを自動化することで、手作業による無駄な時間やミスを削減できます。また、誰でもビルドできるようになるため、リリースのボトルネックを解消できます。 改善したいこと JavaScriptフレームワークやCSSフレームワークの依存関係を自動的に管理したい。ダウンロードして配置を手作業でやりたくな... 続きを読む