タスク自動化ツール「gulp」 を使って制作時間を短縮しよう
2014年12月24日 Webサイト制作, 便利ツール みなさん、タスクランナーを使っていますか？タスクランナーとはファイルの圧縮やSassのコンパイルなんかを、ファイルを保存したと同時に自動で行なってくれる素敵ツールです。制作のスピードアップも間違いなし！今回はそんなタスク自動化ツールのひとつ、gulpを紹介します。 ↑私が10年以上利用している会計ソフト！ gulpとは gulpとは、Node.jsを使ったタスク自動化ツールです。CSSやJavaScriptファイルの圧縮や結合、Sassのコンパイルなんかも自動化できるので、「フロントエンドしかいじらないよ！」というWebデザイナーさんでも、使えるようになると作業がかなりはかどりますよ。一度gulpでプロジェクトファイルを作成しておくと、自動化の手順を他の人と共有できるので、チームで開発する時にも力を発揮してくれます！ Gruntとの違
[vagrant][Wordpress][VCCW][chef]Vagrant + Chef ベースのWordpress Theme / Plugin 開発環境「VCCW」
はじめに VCCWはVagrant + Chef ベースのWordpressのプラグイン / テーマ開発環境です。VagrantとVirtualBoxをインストールすればコマンド数回で仮想マシンが立ち上がり便利なWordpress開発環境ができあがります。ローカルのXAMPPやLAMPを卒業したい、そんな方にお勧めです。 動作環境 VCCWはVagrant 1.5以上、VirtualBox 4.3以上が必要です。コマンドラインで操作することになるので、あまりコマンドラインを使った経験のないデザイナーさんには敷居が高いかもしれません。 VCCWでできること 公式サイトの箇条書きを抜き出してきただけですが、下記のようなことができます。設定ファイル（Vagrantfile）を書き換えるだけで変更もできます。 コンフィグファイルによる設定変更（Vagrantfile） マルチサイト 管理画面のSS
![[vagrant][Wordpress][VCCW][chef]Vagrant + Chef ベースのWordpress Theme / Plugin 開発環境「VCCW」](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)
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//キャッシュファイルを生成
あなたの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の主要機能として有名になった言葉で、コマンドを打つだ
Grunt + TypeScript + Middleman によるフロントエンド開発環境を作ってみる | DevelopersIO
Middleman を使うようになってしばらく経ちますが、2014年4月現在 TypeScript に対応していないというのがどうも気になります。Ruby on Rails や Sinatra といった他の Ruby 製フレームワークと同様、Middleman が対応している Alt JS は CoffeeScript のみです。 CoffeeScript は機能が軽量であることから学習コストが低く、記述されるコード量も少なくなるので個人的に結構気に入っているのですが、Web アプリケーションの規模が大きく複雑になるにつれて静的型付けの機能を持っていないことがデメリットとして浮上してきがちです。案件の規模によっては静的型付け言語の採用を検討しないと後々で大変な目にあいかねません。 はい。JavaScript や CSS 周りのお世話なら Grunt だけで十分にまかなえるのですが、Midd
WebStormでKarma+Mocha+power-assertのjavascriptテスト環境を作る - Qiita
npmでパッケージを揃える グローバル npm install -g grunt-cli bower プロジェクト環境 npm プロジェクトルートに以下のpackage.jsonを置いてnpm installするとパッケージが揃います { "engines": { "node": ">= 0.10.0" }, "devDependencies": { "grunt": "~0.4.2", "karma-mocha": "^0.1.3", "karma-phantomjs-launcher": "^0.1.4", "grunt-espower": "^0.6.0", "grunt-karma": "^0.8.2" } } bower bower install power-assertでpower-assertと依存パッケージがインストールされます。 Grunt設定 プロジェクトルートにGr
とりあえず使いはじめるための１歩進んだところからのGrunt入門＠すぐ動かせるサンプルつき | WP-E (仮)
こんにちわ、コードネームWP-Eイクラ こと @ampersand_xyzです。こぼしイクラとか、お米を覆うほどたっぷりのイクラ丼は邪道です。塩漬けの魚卵と白米との程よいマリアージュこそが正義なのです。よく覚えておいてくださいね。 さて、本日はフロントエンドエンジニア・マークアッパ向けに、Gruntの導入手引について書きたいと思います。 あなたがGruntに手を出さない理由 もしあなたがまだGruntを使っていない場合、今のやりかたで別に困ってないからではないでしょうか？ 確かに、困ってはいないのかもしれません。 だがしかし、本当にその方法はベストなのかということを一度考えてみましょう。 なお、この記事はQiitaに投稿されている Grunt – Getting Started の記事を参考にさせていただいています。 作業効率化してますか？ 言い換えれば、無駄な手作業をしていませんか？例え
Gruntを使ってプロジェクトを自動化する、Myタスクメモ | tipsBear
Gruntで出来ることはたくさんありますが、今回ご紹介するのは私がよく使うGruntの設定のメモになります。 ちなみに、Gruntの導入方法や基本的な解説は下記の記事がとてもわかりやすく紹介してくれていますので、これから導入したいという方がいましたら是非参考にどうぞ。 Web制作で面倒な作業を自動化するビルドツール、Grunt v0.4 入門 – Web Design KOJIKA17 コピペが出来るなら誰でも出来る、Web制作タスク自動化ツール「Grunt」導入手順 – OZPAの表4 今更だけどやるgrunt入門編・インストールから基本的な使い方 – WEB Drawer Web デザイナーさん向け Grunt を使った コーディング作業の効率化、はじめの一歩 – WWW WATCH また、この記事はSass/Compass、ブラウザのliveReloadを使用することを前提に書いてい
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://kudox.jp/server/grunt-js