npm-quick-run
npm-quick-runというツールを使い始めた。npm runをラップして、引数に与えた文字列とマッチするnpmスクリプトを実行してくれるというもの(わかりづらい)。スクリプト名の補完を自動でやってくれるというと近く、使用感的にはGitのautocorrect機能と似たものになる。 例えばdeployというスクリプトが登録されていたとすると、通常は以下のように実行することになる。 $ npm run deploy npm-quick-runでは、他にdで始まるスクリプトがなければ以下のように短縮することができる。 $ nr d スクリプトへ引数も渡せるので「--って打つの面倒くさい……」と考えていた僕のような人にはかなりアピールできるだろう。例えばこのdeployスクリプトで--forceというオプションが使えるとすると、通常は以下のように実行することになる。 $ npm run de
最近のビルドツールって何なの？ - 檜山正幸のキマイラ飼育記 (はてなBlog)
TypeScriptでは、コンパイルが必要です。プログラムをブラウザーとNode.jsの両方で使おうとすると、さらに加工が必要です。ミニファイだの文書も作るだのすると、ちょっとしたビルドプロセスとなるので手作業では辛くなります。 今更Makeでもないよなー、と思い、最近のビルドツールを試してみました。 内容： 流行りすたりが激しすぎる gulpを使ってみる：こんなサンプル gulpのビルドスクリプト タスクランナーってのはビルドツールとは違うのか？ ビルドツールは進化したのか 参考資料： 例題のファイルとコマンドの一覧 ソースファイル 追加の話： gulp問題ひきずり：ウォッチがまたおバカ過ぎる 流行りすたりが激しすぎる 「確かGruntってツールがあったよな」と、インストールと使い方を調べていると、やたらにgulpって単語が目立つんですよね。Gruntのライバルの新興勢力らしいです。 「
フロントエンド開発の３ステップ（npmことはじめ） - Qiita
スライド 当記事は以前勉強会でLTしたものです。 スライドは下記にあります。 フロントエンド覚えること多すぎ問題 モダンなフロントエンド開発で、入門記事を探そうとすると、 まずwebpackやTypeScript, Babelによるビルド環境構築から始まる記事が多くヒットします。 ですが、Node.jsの初心者がいきなり複数のツールを習得しようとすることが 挫折の原因になっていると感じています。 ですので、まずNode.jsをインストールした直後から、必ず使うことになる、 npmの機能をまず覚えておきましょう。 フロントエンド開発で覚えるべき３つのコマンド 以下の3つだけ覚えておきましょう。 npm init npm install npm run これだけ覚えれば、ひとまずフロントエンド開発を進めることができます。 完璧なワークフローを構築するのは、書いているアプリが大きくなってきてから
もうgulpで憔悴しない - 低依存gulpfileのレシピ - Qiita
【追記150805】さらに憔悴しないための有用な記事『アカベコマイリ | gulp なしの Web フロントエンド開発』が掲載されましたので、こちらもお勧めします。 こんにちは、@armorik83です。皆さん、Grunt / gulp使ってますか。おなじみなので、ここでは説明はしません。 この記事の要点 なぜGrunt / gulpは憔悴に至るのか、経緯と問題点 npm run-scriptの仕組みについて package.jsonにscriptを羅列することに対する是非 シンプルなgulpfileについての提言 経緯 さて、先日このような記事が界隈で広まっていました。 Grunt/Gulpで憔悴したおっさんの話 この記事については同意できるところと、そうでもないところと、両方有りました。ただ、Grunt / gulpを使っていて色々歯がゆさを感じている方は昨今増えているだろうと感じます
Web作成の定形作業を自動化できるJavaScriptタスク実行環境Grunt
はじめに HTML／JavaScript開発に限らず、一般にプログラミングの作業ではコンパイルや自動テスト、デプロイなど、開発の本質にあまり関係のない定形作業が発生します。これらの定形作業を自動化できれば、プログラマは処理内容の検討やコーディングなどの本質的な作業に集中でき、作業効率のアップが期待できます。また定形作業を手動で行うことによるケアレスミスの低減も期待できます。 プログラムのビルドに使われるMakeやJava環境で利用されるAntのように、定形作業を自動化するツールは様々な開発言語や環境で提供されています。本記事ではタスクをJavaScriptで記述するタスク実行環境Gruntを紹介します。Gruntを使うとHTML／JavaScript開発で必要となる、以下のような定形作業を自動化できます。 ファイル操作（移動、コピー、削除、名称変更、結合） ネットワーク通信（FTP、SSH
Grunt/Gulpで憔悴したおっさんの話 | MOL
先人たちが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
Web制作の作業を効率化するための自動化ツールGruntの導入方法とおすすめプラグインまとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
はじめまして、フロントエンドエンジニアのおじいちゃんと言います。おじいちゃんはあだ名で、本名は後藤です。よろしくお願いします。 本日は、開発を効率化してくれる自動化ツールのGruntの導入から使用方法、おすすめプラグインまでを紹介したいと思います。 Gruntとは http://gruntjs.com/ GruntはNode.jsを使ったJavaScript製のタスクランナーです。 決まった動作をおこなったときに、あらかじめ決めておいたタスクを実行してくれます。 黒い画面を使うから面倒くさそう…と思っている方もいるかもしれませんが、コマンドはコピペでいけるのでご安心を！ それでは、いってみましょう。 環境構築 Gruntを利用するためには、まずNode.jsが必要です。 さっそくインストールしてみましょう。インストーラーがあるので簡単です。 Node.js 下記URLよりダウンロードしてイ
Rin·HTML5のWebコーディングがさくさくできるプロジェクトテンプレート MOONGIFT
最近のWebデザインでは様々な技術を組み合わせて行うようになっています。昔のようにHTMLとCSS、JavaScriptだけで事足りる訳ではありません。もっと色々なテクニックを組み合わせなければ生産性は高くなりません。 Rinはその一つで、単体のソフトウェアというよりもテクニックの組み合わせ集的な存在です。実践の中で培われたテクニックを手に入れられる、そんな素晴らしいソフトウェアです。 Rinの使い方 Rinで作られたサイトを紹介します。 このようなモダンなデザインのサイト。 大きな画像はインパクトがありますね。 ファイル構成です。 仕組みはgruntを使っていますので、インストールは次のようになります。 $ npm install -g grunt-cli $ git clone git@github.com:sanographix/rin-html-template.git your_
僕がGrunt.jsで使っているPlugin一覧 - Qiita
どんなニーズに基いているか デザインやちょっとしたプログラミングをする人なので、単体テストとかはないです。 デザイナーだけどフロントエンドに興味ある人向け。 2015-02-07: gulp編を作成 gruntからgulpへ移行したので、gulp版の一覧も作成しました。 僕がGulpで使っているPluginとnode.jsモジュール一覧 - Qiita プラグイン一覧：非Contrib系 grunt-aws-s3 S3にアップロードできるプラグインはいくつかあるけど、いくつか試して一番良かったのがこれ。 同名ファイルは確認なしで上書き可能 デフォルトでpublic-readになるので、Web関係には便利 配布元 https://github.com/MathieuLoutre/grunt-aws-s3 grunt-bless IE9のセレクタ数限界を解消する「bless」を実行できる。 昔
GruntでSassのビルドとjsファイルの結合・圧縮を自動化 - bata's log
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//キャッシュファイルを生成
Grunt の設定オブジェクトの秘密 - Qiita
いや、別に秘密でも何でもなく、ただ私が最近社内勉強会用に調べるまで知らなかっただけですが・・・。 grunt.initConfig() で渡す Object がありますよね。Gruntfile.js のほとんどを占めるあの長大なオブジェクト。あまり良くわかっていなくても、ドキュメントやブログの例を真似すれば、どうにか Grunt を使うことはできます。 しかし、これってよく見ると、？なところがたくさんあります。 options とかあるけど、options に入れるのと入れないの（src, dest など）は何が違うの？ トップレベルに pkg とかタスク名じゃなさそうなものを入れてる例を見るけど？ grunt connect:server:keepalive とか見るけど keepalive はどこから来たの？ Grunt の基本概念から調べつつ、これらの疑問に答えていきます。 普通のタ
Grunt初心者が2時間くらいでChrome ExtensionをGrunt対応してみた - くりにっき
rubyのgemだと rake release で gemを作成 gemのバージョンで git tag -a 〜 git push origin master git push origin --tags RubyGems.org にgemをリリース まで全部やってくれるのですが、Chrome Extensionでも同じことをやりたくてGruntタスクにしてみました。 ただし、5. の部分はChrome Extensionはコマンドラインからファイルを（たぶん）アップできないためDeveloper Consoleにzipをアップするためのzipを作るだけです。 rubyでRaketaskにしてもよかったのですが「郷に入りては郷に従え」ってことでJavaScriptの標準(?)タスクランナーを使ってみました。 参考にしたサイト Gruntで始めるWeb開発爆速自動化入門（1）：ブラックなWe
Grunt で Vagrant up 時にデータベースをインポートするようにしたらすごく捗る！
普段、ローカルは Vagrant（ VCCW ）で開発を行っていて、WordPress の各ディレクトリ・ファイルは Vagrant の共有フォルダ機能があるので良い感じに別環境に複製したりテスト環境、本番環境にアップロードしたりできるのですが、データベースの内容はローカルと共有できず、Vagrant 環境の中にある形となるので、インポート、エクスポートがとっても面倒だなと思っていました。 ということで、Grunt から WordPress データベースのインポート、エクスポートが良い感じにできるようにしてみました。 実際どのような環境にしたのか 対象サイトの開発環境のルートで grunt とコマンドを打つだけで Vagrant の起動、sql ファイルが存在したらそれをインポート（無ければ無視）、grunt halt でデータベースのエクスポート、Vagrant の終了が行われるようにし
あなたのWeb開発人生を変えるYeoman、Bower、Yoのインストールと使い方
連載目次 前回記事「Gruntで独自タスクを定義し、独自プラグインをnpmモジュールとして作成・公開するには」では、Gruntを使っていろいろな手法でタスクを定義する手法や、独自プラグインを作成してnpmで公開する方法について解説しました。 今回は少し角度を変えて、Gruntを自身の機能として利用しており、快適な開発ワークフローを提供してくれるツール、「Yeoman」について解説します。 3つのツールを統合したワークフローを提供する「Yeoman」 Yeomanとは、公式サイトいわく、「The web's scaffolding tool for modern webapps」とのことです。 訳すと、「今風のWebアプリのための土台／基盤を作ってくれるツール」といったところでしょうか。「scaffolding」はRuby on Railsの主要機能として有名になった言葉で、コマンドを打つだ
AngularJSにE2Eテスト環境としてProtractorを導入する。 | DevelopersIO
はじめに AngularJS Generatorで作成した雛形にはE2Eテスト環境を作ろうとした形跡は見られるのですが、実際にGruntのタスクとしては登録されておらず、E2Eテストは行えない状態です。 また、E2Eテスト環境も現在では非推奨であるAngular Scenario Runnerを用いた形の為、 現在AngularJS側も推奨をしているProtractorを導入します。 導入方法 AngularJS Generatorを用いて雛形を作成します。 雛形作成に関しては、下記の記事を参照ください。 Yeomanを使ってAngularJSアプリのひな形をつくってみる Protractorとgrunt-protractor-runnerを導入 $ npm install --save-dev protractor grunt-protractor-runner $ node node_
「Gruntで始めるWeb開発爆速自動化入門」関連の最新 ニュース・レビュー・解説 記事 まとめ - ITmedia Keywords
JavaScriptメインでWeb開発を行う際にさまざまな作業を自動化して開発効率を爆発的に高めるツール（Grunt、Yeoman、Bowerなど）やエディター、IDE、実行環境などを紹介していく連載。 gulp.jsで始めるWeb開発爆速自動化入門： 便利なGruntの弱点を補うgulp.jsのインストールと使い方 タスク自動化のためのビルドツールgulpの概要と、Gruntとの違い、セットアップ方法や基本的な使い方、よく使用する主なAPI5つなどを紹介します。（2014/8/19） Gruntで始めるWeb開発爆速自動化入門（終）： あなたのWeb開発人生を変えるYeoman、Bower、Yoのインストールと使い方 JavaScriptメインでWeb開発を行う際にさまざまな作業を自動化して開発効率を爆発的に高めるツールなどを紹介していく連載。今回は、プロジェクトひな型生成の「Yo」とパ
gulp vs Grunt - lxyuma BLOG
概要 gulpの入門記事を以下に書いて行きます。 目次 gulpとは gulp sample gulp支える技術(Streamと並行性) grunt vs gulp どっち使う? gulp.jsとは いわゆるフロントエンド周りの task runner build tool Gruntあるでしょ その通り いわば、Gruntの簡易版 去年位?出来た後発のtool 最近、blog記事も増えてきた 公式Page売り文句 複雑なtaskも管理し易く、simpleで、使うのが簡単 一時fileのdisk書き込みが無いので早くて能率的 simpleで期待通り動くようにPluginのGuidelineがある APIが小さく学習時間かからない リソース gulp公式page 入門記事 クラスメソッドさんの入門記事 shuheiさんのqiita記事 sample多め anatooさんの入門記事 Shump
Gruntでプチバージョン管理♥ぽいアップロードのやりかた - Qiita
ブランチを簡単に切るようにアップロードがしたいんです！ いろんな演出を試したり、UIを変更したり、ブランチを簡単に切るようにアップロードがしたいんです。 で、いろんなひとにサクッと確認してほしいんです！ 日付ディレクトリを自動で作ってアップロードしまくる！ こういう感じのバージョンにしたディレクトリをいっぱい作ってそこに展開しまくります。 わかりやすい！やりかた grunt-sftp-deploy を使います ビルドIDを作成(日付ディレクトリになるやつ) publicディレクトリの中身を、日付ディレクトリにアップロードするようにsftp-deployのdestを設定 # Grunt v0.4.5で動きます # 日付を作る # build-versionオプションが設定されてなかったら、いまの時間を設定する revision = grunt.option('build-version')
Mac上でJSHint + Gruntを使ってJavaScriptの文法チェック
Titaniumの開発で、今まではTitanium Studioの画面にエラーがないか確認していた。しかしTitanium StudioはJSLintを使っているのでチェックが厳しい。 for文内のcontinueを許可したかったり、Warningを消す設定が面倒くさくなったので、Titanium Studioを使わずJSHint + Grountを使ってリアルタイムにファイル監視しながら開発してみることにした。 環境： Mac OS X 10.9.3, Titanium SDK 3.2.3.GA 基本はCentOS上にインストールしたときと一緒。 JSHintをインストール。 $ sudo npm install jshint -g Gruntのコマンドラインツールをインストール。 $ sudo npm install grunt-cli -g プロジェクトディレクトリに移動してGrun
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CentOS上でJSHint + Gruntを使ってJavaScriptの文法チェック