ウェブ制作の現場では作業の自動化を行うことが多いです。Node.jsインストール時に付属するnpm (Node Package Manager)を使用すれば、タスク処理が実現できます。 npmとはNode.jsのモジュールを管理するためのツールであり、タスク処理にはnpmの機能のnpm-scriptsを使用します。本記事はnpm-scriptsを使ったタスク実行環境が構築できることを目標に解説します。 そもそもnpm-scriptsとは何か？ npm-scriptsとは、package.jsonファイルに記述可能なシェルスクリプトのエイリアスです。エイリアスとはコマンド名を別のコマンド名に置き換えることです。以下のnpm-scriptsはHello world!!を表示させるコマンドのエイリアスを作成する例です。 ▼package.jsonファイル { "scripts": { "say"
TypeScriptでは、コンパイルが必要です。プログラムをブラウザーとNode.jsの両方で使おうとすると、さらに加工が必要です。ミニファイだの文書も作るだのすると、ちょっとしたビルドプロセスとなるので手作業では辛くなります。 今更Makeでもないよなー、と思い、最近のビルドツールを試してみました。 内容： 流行りすたりが激しすぎる gulpを使ってみる：こんなサンプル gulpのビルドスクリプト タスクランナーってのはビルドツールとは違うのか？ ビルドツールは進化したのか 参考資料： 例題のファイルとコマンドの一覧 ソースファイル 追加の話： gulp問題ひきずり：ウォッチがまたおバカ過ぎる 流行りすたりが激しすぎる 「確かGruntってツールがあったよな」と、インストールと使い方を調べていると、やたらにgulpって単語が目立つんですよね。Gruntのライバルの新興勢力らしいです。 「
webpack とは webpack は WebApp に必要なリソースの依存関係を解決し、アセット（配布物）を生成するビルドツール（要するにコンパイラ）です。JavaScript だけでなく、CoffeeScript や TypeScript、CSS 系、画像ファイルなどを扱うことができます。 WebApp のビルドツールは Grunt や Gulp が有名です。これらは基本的に、ビルド手順をタスクという形で自ら定義する必要があり、フロントエンド開発に馴染みのない開発者にとっては敷居が高いものでした（少なくとも、自分はそうでした）。 webpack を使えば、Grunt も Gulp も必要ありません！覚えるべきことはほとんどありません。（必要なら）簡単な設定ファイルを書いて webpack コマンドを実行するだけです。 以下では基本的な使い方を見ていきます。 ※もちろん Grunt/G
先人たちが1年前に通った道で、いろいろいまさらかよって話なんですが。基本的に以下の記事読んだら分かります。要はGulpとかGruntといったモノ使わずにnpm run hogehogeでビルドしよーぜって話です。 task automation with npm run オレ的Gruntに対する最新の気持ち - from scratch Node - npm で依存もタスクも一元化する How to Use npm as a Build Tool // package.json "scripts": { "start": "npm run start-serve & npm run watch", "test": "stylestats public/files/css/maple.css", "start-serve": "browser-sync start --server publ
ブラウザ上もでrequire使いたい 現状Coffeeのclassを異なるファイルから参照するにはwindow.HogeClassとか@HogeClassとかでグローバル変数をってたんだけどBrowserifyを使えばNode.js のモジュールのようにrequireで読み込みことができるっぽい。参考記事を見ながら簡単なサンプルを実際に作ってみた。 grunt-cli のインストール npm install -g grunt-cli package.jsonを作成 npm init 対話形式でpackage.jsonを作成。 必要な情報を入力してください。 プロジェクトに必要な情報を記述するjsonファイルが生成されます。 browserify grunt grunt-browserifyのインストール npm install browserify grunt grunt-browseri
bower 的なものを使わないと､｢これどこから拾ってきたんや……｣という感じになりがちなので､一応やったほうがいいでしょうと｡ bower は直接使っていると､git のレポジトリをぶちまけるばかりで､あきらかに不要なファイルを配信することになり気持ち悪いなーと思っていたのですが､grunt なり gulp なりを使うと､いらないファイルは展開されないようです(ちゃんと main というプロパティを bower.json に記述している場合)｡ Perl なりなんなりで書いていると､node.js のツールを一部だけ使うのとかだるくてアレですが､Java の案件だとみんな何かしら LL を併用しながらやるので､まあいいかな､と｡ package.json に以下のように記述します｡そうすれば grunt の依存とかもなんとなく入る｡ { "name": "jmx-dashboard",
2014年12月24日 Webサイト制作, 便利ツール みなさん、タスクランナーを使っていますか？タスクランナーとはファイルの圧縮やSassのコンパイルなんかを、ファイルを保存したと同時に自動で行なってくれる素敵ツールです。制作のスピードアップも間違いなし！今回はそんなタスク自動化ツールのひとつ、gulpを紹介します。 ↑私が10年以上利用している会計ソフト！ gulpとは gulpとは、Node.jsを使ったタスク自動化ツールです。CSSやJavaScriptファイルの圧縮や結合、Sassのコンパイルなんかも自動化できるので、「フロントエンドしかいじらないよ！」というWebデザイナーさんでも、使えるようになると作業がかなりはかどりますよ。一度gulpでプロジェクトファイルを作成しておくと、自動化の手順を他の人と共有できるので、チームで開発する時にも力を発揮してくれます！ Gruntとの違
はじめに Qiita 初投稿ながら Advent Calendar 書かせて頂きます。 書きたかった他の方々すみません。 この記事は、自分も含めて、 「Grunt とか gulp.js とか、名前は聞くけどそういうのよく分からないよ」 「使ってみたけど、なんか上手く行かないよ」 という人たち向けの記事です。 巷では「gulp.js 使えよ」という風潮をひしひしと感じますが、 素人には Grunt の方が取っ付き易いなあ、と思うところがあったので Grunt の記事にします。 お世話になってきた Grunt への追悼もちょっぴり込めて… Grunt を使ってみよう 既に秀逸な記事が沢山あるのでさらっと。 ここでは grunt-init を利用してひな形を作りましょう。
~ 198 slides on tools to help you stay productive on the front-end.
普通に使う分には全く困らないほどの数のプラグインがGulpにはあります。 Githubでのstar数からも明らかなように、GoogleのWenStarterKitでもGulpが採用されるなど、注目度はますます高くなっています。 Gruntとの比較 Gruntと比較してのメリット・デメリットは以下のようになります。 メリット Gruntより設定ファイルが記述しやすい StreamAPIを利用することでファイルを毎回書き出すGruntより高速でエコ デメリット 記述がよりNodeに近くなるため、複雑なことは敷居がやや高め プラグイン開発のためのドキュメントが少ない 今日のゴール Gulp.jsを使ってコーディング作業を10倍速くする！ そんな環境を作りたいと思います。 1. Node.jsをインストール まずはNode.jsをインストールしましょう。 Node.js http://nodejs
Headless testing with Jasmine, PhantomJS and Grunt February 5 2014 It’s hard to find a good excuse not to test your JavaScript these days. Previously it was a pain to write unit tests. One had to wire up an HTML spec runner page, include various dependencies and then manually refresh the page to see the test results. Whilst this was bearable it certainly made automation a pain. Nowadays we have a
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? どんなニーズに基いているか デザインやちょっとしたプログラミングをする人なので、単体テストとかはないです。 デザイナーだけどフロントエンドに興味ある人向け。 2015-02-07: gulp編を作成 gruntからgulpへ移行したので、gulp版の一覧も作成しました。 僕がGulpで使っているPluginとnode.jsモジュール一覧 - Qiita プラグイン一覧：非Contrib系 grunt-aws-s3 S3にアップロードできるプラグインはいくつかあるけど、いくつか試して一番良かったのがこれ。 同名ファイルは確認なしで上書き可
The document discusses working with code abstract syntax trees (ASTs). It provides examples of parsing code into ASTs using libraries like Esprima, querying ASTs using libraries like grasp-equery, constructing and transforming ASTs, and generating code from ASTs. It introduces aster, an AST-based code builder that allows defining reusable AST transformations as plugins and integrating AST-based bu
minimatch っていうのは Grunt や gulp.js その他あちこちで（npm もらしい）使われてるグロブマッチライブラリです。最近よく gulp を使ってるんだけど、毎回 gulp.src() の書き方で迷ってしまう。調べた結果 minimatch に行き当たったんだけど各種 glob 実装のドキュメント読んで把握しろ、という感じでよく分からなかったので早見表を作った次第です。 https://github.com/motemen/minimatch-cheat-sheet 確認用にテストを書いていて、そのテストケースからドキュメントを生成してるので間違いはないはずです。説明が間違ってる、この例も乗せた方が見やすいだろ、とかあればプルリクください。 折角なので日本語版を書いておきますね。 基本 * はパスセパレータを含まない任意の文字列にマッチ ** はパスセパレータを含む任
釣りっぽいタイトルになってますが、ようはCompassのSprite Generatorだと解決できないことをgrunt-spritesmithならやってくれるよって話です。 Compassの方については山ほど記事があるので、あまり知らないよって方はてきとーにググってください。 Compassの問題点 Sassでしか使えない 一つ目は当然ですが、CompassはSassのフレームワークなのでLessとかStylus派の人は使えないってことです。 私は最近はStylus派なので、なにか良いSpriteツールないかなーと探し始めたのが最初でした。 SassのCompileのたびにSprite化処理が実行される これは画像が多いサイトではかなり深刻な問題となります。画像とは関係ないStyleの変更時でも毎回Sprite化が実行されるため、確認までかなりの時間をロスします。 正方形に画像を並べると
Gruntis suitable for building JavaScript project as concat, minify, jshint and unit test.Jenkinsis suitable for CI as using SCM polling, scheduler. I think these tools makes our development faster. This is sample of front-end javascript project and building with Grunt on Jenkins. Awesome projectsrcScript filesdistCompressed production filesdist/covTest coveragedist/metricsJavaScript static analysi
JSファイルの結合と圧縮を自動化したくて色々調べていたのですが、やはりGruntが一番便利だということで導入してみたました。 結論からいうと、もっと早く導入すればよかった。 Gruntの導入 導入部分は下記を参考に。 Windowsの場合 http://webdrawer.net/javascript/firstgrunt.html Macの場合 http://catcher-in-the-tech.net/461/ Gruntfile.js を記述 module.exports = function(grunt) { grunt.initConfig({ //Sassをビルド sass: { options: { style: 'compressed',//CSSのスタイル sourcemap: true,//ソースマップを書き出す noCache: true//キャッシュファイルを生成
Веб студіяБудь-який вид бізнесу, а тим паче його розвиток неможливо уявити без взаємодії з людьми, які є потенційними партнерами або клієнтами. У сучасному світі всі питання, що стосуються бізнес-завдань і залучення замовників вирішуються через Інтернет. Замовити сайт веб студії Codeweb, можна з повним циклом розробки. Наше агентство займається проектуванням і розробкою багатозадачних ресурсів, са
いや、別に秘密でも何でもなく、ただ私が最近社内勉強会用に調べるまで知らなかっただけですが・・・。 grunt.initConfig() で渡す Object がありますよね。Gruntfile.js のほとんどを占めるあの長大なオブジェクト。あまり良くわかっていなくても、ドキュメントやブログの例を真似すれば、どうにか Grunt を使うことはできます。 しかし、これってよく見ると、？なところがたくさんあります。 options とかあるけど、options に入れるのと入れないの（src, dest など）は何が違うの？ トップレベルに pkg とかタスク名じゃなさそうなものを入れてる例を見るけど？ grunt connect:server:keepalive とか見るけど keepalive はどこから来たの？ Grunt の基本概念から調べつつ、これらの疑問に答えていきます。 普通のタ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
