gulp なしの Web フロントエンド開発 - アカベコマイリ
Web フロントエンド開発において gulp は非常に便利だ。しかしあまりにも gulp に依存しすぎており、これなしで開発できるだろうか？という不安もある。というわけで gulp を利用せず package.json と npm だけで同等の機能を実現する方法を検討してみた。 2015/11/4 追記 babelify v7.2 を試すで babelyfy 7.2 ( とその中の Babel 6.x ) について調べ、npm-scripts の変更が必要なことを確認したので追記。また Windows 環境の動作検証をおこなったところ、最新の watchify なら -o オプションが通ることを確認できた。よって本記事の最後の課題が解決したことになる。 2015/9/23 追記 cpx と rimraf を試すの内容をファイル処理に反映して簡略化。 2015/9/15 修正 Stylus
GRUNT AND GULP TASKS FOR PERFORMANCE OPTIMIZATION
Delays in performance have the potential to impact user engagement, experience and revenue. Thankfully, Google’s ‘Make The Web Faster’ team recommend a set of best-practice rules for keeping your pages lean, fast and smooth. These include minifying resources like CSS and JavaScript, optimizing images, inlining and removing unused styles and so on. If you have complete control over your server, an
[Gulp][SketchTool][Sketch 3]これからはじめるGulp（22）：gulp-iconfontとgulp-sketchを使ったアイコンフォント作成の自動化
はじめに この記事はGulp.js（全俺） Advent Calendar 2014です。 前回のこれからはじめるGulp（21）：gulp-awspublishプラグインを使ったAmazon S3への静的WebサイトパブリッシュでAmazon S3への静的サイトパブリッシュを試しました。今回はSketch 3のデザインデータからgulp-iconfontとgulp-sketchプラグインを使ってアイコンフォント作成を自動化してみたいと思います。 gulp-iconfontについて gulp-iconfontはSVGアイコンを使ってSVG/TTF/EOT/WOFF形式のフォントを作ることができます。 gulp-sketchについて gulp-sketchはこれからはじめるGulp（19）：gulp-sketchとgulp-execを使ったSketch 3デザインデータの画像書き出しの回で紹
![[Gulp][SketchTool][Sketch 3]これからはじめるGulp（22）：gulp-iconfontとgulp-sketchを使ったアイコンフォント作成の自動化](https://cdn-ak-scissors.b.st-hatena.com/image/square/28ce70a4ba19573c729e61a380304d78f3fccffd/height=288;version=1;width=512/http%3A%2F%2Fwhiskers.nukos.kitchen%2Fassets%2Fimages%2Fogp.png)
タスク自動化ツール「gulp」 を使って制作時間を短縮しよう
2014年12月24日 Webサイト制作, 便利ツール みなさん、タスクランナーを使っていますか？タスクランナーとはファイルの圧縮やSassのコンパイルなんかを、ファイルを保存したと同時に自動で行なってくれる素敵ツールです。制作のスピードアップも間違いなし！今回はそんなタスク自動化ツールのひとつ、gulpを紹介します。 ↑私が10年以上利用している会計ソフト！ gulpとは gulpとは、Node.jsを使ったタスク自動化ツールです。CSSやJavaScriptファイルの圧縮や結合、Sassのコンパイルなんかも自動化できるので、「フロントエンドしかいじらないよ！」というWebデザイナーさんでも、使えるようになると作業がかなりはかどりますよ。一度gulpでプロジェクトファイルを作成しておくと、自動化の手順を他の人と共有できるので、チームで開発する時にも力を発揮してくれます！ Gruntとの違
[Gulp]これからはじめるGulp（5）：gulp-connectモジュールを使ったLiveReload
はじめに この記事はGulp.js（全俺） Advent Calendar 2014です。 前回のこれからはじめるGulp（4）：gulp-connectモジュールを使ったローカルサーバの起動でgulp-connectを使ったローカルサーバを起動できました。今回はgulp-connectのLiveReload機能を使いファイルの変更に合わせてブラウザをリロードさせます。 gulp-connectのLiveReload LiveReloadを行うにはgulp-connectにオプションを追加してブラウザにLiveReload用のプラグインをインストールします。 LiveReloadを有効化する serveタスクのオプションでLiveReloadを有効化（livereload: true）します。 //server gulp.task('serve', function(){ connect.
Gulp.js入門 - コーディングを10倍速くする環境を作る方法まとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
普通に使う分には全く困らないほどの数のプラグインがGulpにはあります。 Githubでのstar数からも明らかなように、GoogleのWenStarterKitでもGulpが採用されるなど、注目度はますます高くなっています。 Gruntとの比較 Gruntと比較してのメリット・デメリットは以下のようになります。 メリット Gruntより設定ファイルが記述しやすい StreamAPIを利用することでファイルを毎回書き出すGruntより高速でエコ デメリット 記述がよりNodeに近くなるため、複雑なことは敷居がやや高め プラグイン開発のためのドキュメントが少ない 今日のゴール Gulp.jsを使ってコーディング作業を10倍速くする！ そんな環境を作りたいと思います。 1. Node.jsをインストール まずはNode.jsをインストールしましょう。 Node.js http://nodejs
Learning Gulp: Getting started with the Front End Factory
Getting Started With GulpWhat is Gulp?Gulp is an automatic task runner, or build system, written in node.js and can handle many common workflow tasks. In his git-book, David Nowinsky described Gulp as a factory. I really like this description. Gulp, much like a factory, takes files and turns them into other files.You might question why this is needed, and to some it might not be. If you’re working
Headless testing of Ember apps with Gulp and Jasmine
TL;DR: use Karma as a test runner for your JS apps. It's great because it adds DOM support without any effort and you need DOM support when you're testing browser apps. First of all - I love Jasmine. It's a terrific testing framework. Maybe I'm biased because I'm a Ruby developer deep down, we Rubyists love expressiveness, but I love how readable test suites it produces. Secondly, I love PhantomJS
A JavaScript Build System Shootout: Grunt Vs. Gulp Vs. NPM | Modern Web - Web3, Business & Technology
A JavaScript Build System Shootout: Grunt vs. Gulp vs. NPM Nicolas Bevacqua dives into the task of choosing a JavaScript Build System. He compares the big three: Grunt, Gulp and NPM and discusses the benefits and drawbacks of each. By Nicolas Bevacqua Deciding on a technology is always hard. You don’t want to make commitments you won’t be able to back out of, but eventually you’ll have to make a c
タスクランナーgulp入門
タスクランナーgulp入門 gulpはGruntと同じように様々なタスクを自動化してくれるツール(タスクランナー)です。 node.jsで開発されており、Sass/CompassやLess、StylusなどのCSSプリプロセッサーのコンパイルやCSS/JSの結合圧縮、JSHintによるバリデーションなど様々なタスクを自動で行ってくれます。 Gruntとできることはほとんど同じですが、Gruntよりタスクの流れがわかりやすく、JavaScript(node.js)で独自のタスクも簡単に記述することができます。 後発ということもありGruntよりプラグイン数は少ないですが、マニアックなタスク以外はそろっているので通常のWeb制作などでは問題なく利用できるでしょう。 node.jsのインストール node.jsが必要ですのでインストールしていない方はインストールしましょう。 公式サイトでインスト
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
scalable minds | 404
Cozy Cloud