[B! grunt] yoshiwebのブックマーク

[意訳]私がGulpとGruntを手放した理由 - Qiita

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? このポストは、Why I Left Gulp and Grunt for npm Scriptsを筆者の許諾を得て意訳したものです。間違いがありましたら、ご指摘いただけると幸いです。（以下、訳）私はGulpとGruntが不要な抽象化レイヤーだと気づきました。npmのscriptsはとても強力で、そっちの方が便利だったりします。例を挙げましょう私はかつてはGulpが大好きでした。しかし結局のところ、100行ものgulpfileと大量のgulpプラグインを扱うハメになりました。Gulp上でWebpackやBrowsersync、Mo

yoshiweb 2016/02/04

リンク

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//キャッシュファイルを生成

yoshiweb 2014/08/07

grunt

リンク

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を使用することを前提に書いてい

yoshiweb 2014/07/02

リンク

Yeoman（yo + grunt + bower）を始めてみてわかったこと

# インストールできるバージョンを確認する ndenv install -l # 最新の安定版（2014-03-20時点）をインストールする ndenv install v0.10.26

yoshiweb 2014/06/24

リンク

Web デザイナーさん向け Grunt を使ったコーディング作業の効率化、はじめの一歩 | WWW WATCH

フロントエンドの開発を色々と捗らせてくれる Grunt について、初めて Grunt を使うならこれだけまずはやってみたら？という入門的な解説記事を書いてみました。この記事は公開からかなりの時間が経過して内容が古いのと、Gulp を使ったフロントエンド開発環境構築について新しい記事「Web サイト作るお仕事をしている人向け Gulp で作るフロントエンド開発環境」を書いていますのでそちらをご覧ください。 Grunt の導入記事なんか珍しくもないし、色々な方がわかりやすい記事を過去にも書かれていているので今さらではありますが...... とはいえ、まだ使ったことがない人もいるだろうということで、「Grunt って何ですか？」とか「使ってみたいけどよくわからない......」なんていう Web デザイナー（主に HTML や CSS を書くフロントエンドな人）さん向けに、初めて

yoshiweb 2014/02/08

grunt

リンク

「今どきのGruntを使ったフロントエンド開発（HTML/CSS編）」HTML5 Conference 2013 セッションレポート

「今どきのGruntを使ったフロントエンド開発（HTML/CSS編）」HTML5 Conference 2013 セッションレポート出口達也 2013年11月30日（土）に開催された「HTML5 Conference 2013」の、株式会社サイバーエージェント・石本光司さんによるセッション「今どきのGruntを使ったフロントエンド開発（HTML/CSS編）」の内容をご紹介します。なお、セッションのターゲットはGruntを使ったことのないHTML/CSSコーダーやWebデザイナーさんです。なぜGruntを使うのか Gruntとは、JavaScriptで書いたタスクを実行してくれるアプリケーション（JavaScript Task Runner）です。 Webアプリケーションの開発が複雑になってきて、CoffeeScript、Sassなどのコンパイルが必要な技術を使うことが多くなってきた

yoshiweb 2014/02/08

grunt

リンク

Gruntで始めるWeb制作の自動化

Gruntで始めるWeb制作の自動化 Grunt.jsとはWeb制作の様々なタスクを自動化してくれるツールです。 node.jsで開発されており、Sass/CompassやLessなどのCSSプリプロセッサーのコンパイルやCSS/JSの結合圧縮、JSHintによるバリデーションなど様々なタスクを自動で行ってくれます。インストールまずはnode.jsをインストールします。公式サイトでインストーラーが配布されていますので簡単にインストールが可能です。次にMacではターミナルを開いてgrunt-cliをインストールしましょう。cliとはCommon Language Infrastructureの略でコマンドラインからGruntを利用するためのツールです。 sudo npm install -g grunt-cli パスワードが聞かれるので入力してください。成功すればgrunt-cliのイ