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
grunt-ftp-deployでアップロードの自動化 | { Design Toybox }
Gruntのビルドプロセス後に自動アップロード出来るようにする為に、grunt-ftp-deployを使ってみました。意外と設定も簡単だったので、メモがてら書いて行きます。 使おうと思った経緯として、このブログdocpadで作っているのですが、docpad全部やろうとせず、最終的なビルドはGruntを使おうと考えた為です。ビルドプロセスの最後にこのgrunt-ftp-buildを使ってアップロードを自動化しようという訳です。 grunt-ftp-deployのインストールとタスクの読み込み まずはgrunt-ftp-deployのインストール。 $ sudo npm install grunt-ftp-deploy --save-dev インストールしたら、Gruntfileにタスクを書き込んでおきましょう。 grunt.loadNpmTasks('grunt-ftp-deploy');
Grunt 日本語リファレンス | js STUDIO
このサイトについて Gruntの日本語リファレンスです。 Gruntの本家サイト(英文) の内容を翻訳して作成していますが、誤訳や誤記があると思いますのでその点についてはご了承ください。 もし、誤訳などの間違いを見つけましたら、 @tomof まで教えていただければ幸いです。 News 2013.04.15 サイトをオープンしました。 概要 何故タスクランナーを使うのか？ 一言で言えば、自動化のためです。 ファイル圧縮、コンパイル、単体テスト、Lintなどの繰り返し実行しなければいけないタスクを自動化することで、仕事を楽にしてくれます。 タスクランナーを設定すれば、こういった冗長的なほとんどの仕事を、あなたやチームのために行なってくれます。 何故Gruntなのか？ Gruntエコシステムは、巨大で日々成長しています。 Gruntを使って文字通り何百ものプラグインから選択し、最小限の努力で自
あなたの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を使ってプロジェクトを自動化する、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を使用することを前提に書いてい
ブラックなWeb開発現場の救世主、Gruntのインストールと使い方
連載目次 一昔前であれば、HTML／JavaScript／CSSを使用してWebアプリを作成する場合、（筆者の経験では）所定の位置にファイルを置くだけでした。最近はHTML／JavaScript／CSS関連の技術も複雑化／多様化し、いろいろなことを考慮しなければなりません。 例えばJavaScriptファイルの場合は、以下の作業を行うこともあるでしょう。 minify（圧縮）や結合 単体テストの実行 JSLint（構文チェック）の実行 さらに、CoffeeScriptやTypeScriptを使用している場合にはコンパイル（JavaScript変換）を行う必要もあります。 また、SCSS（Sass）やLESSなどのCSS拡張メタ言語を使用している場合にも、コンパイル（CSS変換）作業が必要です。 ファイルを修正してビルドするたびに、これらの作業をいちいち手作業で行っていては非常に面倒でしょう
Gruntのtaskの実行にかかる時間を劇的に短縮する方法 - Qiita
最近ではGrunt無しでのフロントエンド開発は考えられなくなってきた気がしますが、大抵taskを実行した際に結構時間がかかってしまいます。 Gruntの実行にかかる時間を減らすにはどうすれば良いのか調べてみたら、loadTasks as they are needed to speed up Grunt load time · Issue #975 · gruntjs/gruntのissueに方法がありました。 何に時間がかかっているか taskを走らせた際、何で時間がかかっているのかをtime-gruntで確認してみると、実行しているtask自体ではなくnpmタスク(適切な表現かは分かりませんがGruntプラグインの事です。)の読み込みの方に時間がかかっている事が分かります。 loadNpmTasks()で2秒はかかっている状態 npmタスクの読み込みに何故時間がかかるかというと、Gru
tuvistavie
かなり前から気になってはいたので、今度こそ使ってみようと思って、AngularJSを使い始めた。 Yo+Grunt+Bowerを使うとワークフローがかなり楽なので、ここにまとめておく。 まず、 以上の３つのソフトは何なのかを軽く紹介する。 Yo: プロジェクトのテンプレートなどを自動生成するためのツール Grunt: JSのタスクランナー。テストの実行とか、ファイルの結合とか自動でやるために使う。 Bower: Twitterの出しているJSのフロントエンド用のパッケージマネージャー。 セットアップ 事前インストール Nodeとnpmのインストール このツールを使うためにNodeJSとnpmが必要になるので、まずそのインストールから。 NodeJSのインストールはプラットフォームによって変わったりするけど、WindowsとMacの場合は公式サイトのダウンロードページからインストーラーがダウ
WordPress自作テーマのディレクトリ構造のメモ | FindxFine
テーマを作成するときのディレクトリ構造のメモ。 2013.01.30 追記 参考にしたサイト。 » Using Grunt to Speed Up & Standardize your WordPress Theme Development » 10up/grunt-wp-theme 利用ツール スタイル プリプロセッサ sass/compass スタイルガイド styledocco JavaScriptドキュメンテーション YUIDoc PHPパッケージ管理 Composer PHPドキュメンテーション phpDocumentor CI Grunt mytheme | |-- assets | |-- css | |-- sass | |-- _module1.sass |-- _variables.sass |-- main.scss | |-- main.css |-- main.m
[grunt] ファイル保存したタイミングで、ブラウザを自動的にリロードして、確認作業をスピードアップさせよう - YoheiM .NET
[grunt] ファイル保存したタイミングで、ブラウザを自動的にリロードして、確認作業をスピードアップさせよう こんにちは、@yoheiMuneです。 HTMLやCSSやJSなどのフロントエンド開発を効率的に行いたい。そんな目標のもと、今回はgruntJSを使ってファイル保存したタイミングで、自動でブラウザリロードしてソースの変更内容を即座に確認する方法をブログに書きたいと思います！ ※2014/02/05更新 grunt-regardeではなくgrunt-contrib-watchでも出来るようになったので、記載を修正しました。 gruntJSのセットアップ gruntJSは、 CSSプリプロセッサのコンパイル、JSファイルの結合などフロントエンドの開発で行うビルド作業を行うためのツールです。 まずはgruntjsが使えるようにセットアップを行います。 nodeとnpmを利用しますので、
![[grunt] ファイル保存したタイミングで、ブラウザを自動的にリロードして、確認作業をスピードアップさせよう - YoheiM .NET](https://cdn-ak-scissors.b.st-hatena.com/image/square/45f422e34884f17dd5343674c46ba504c2dca97c/height=288;version=1;width=512/https%3A%2F%2Fwww.yoheim.net%2Fimage%2F227.jpg)
hanatoweb.jp - このウェブサイトは販売用です！ - hanatoweb リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
JavaScriptフロントエンド開発の昨今
フロントエンドのパラダイムを参考にバックエンド開発を再考する / TypeScript による GraphQL バックエンド開発
Web制作で面倒な作業を自動化するビルドツール、Grunt v0.4 入門
Web制作で面倒な作業を自動化するビルドツール、Grunt v0.4 入門 2013-03-14 / 2014-03-12 Webサイトの表示速度を気にすると、CSSやJavaScriptのminify、gzip、CSS Sprite、画像の最適化などの面倒な作業が発生します。 Grunt.jsとは？ Grunt.jsは、サーバーサイドJavaScriptのNode.jsを使用したCUIのビルドツールです。 タスクを設定しておき、それらを自動化します。 コマンドプロンプトやターミナルなど、いわゆる「黒い画面」を使います。 Grunt.jsの現在のバージョンは0.4.1です。 バージョンが0.3から0.4になったことで、大きく仕様が変わりました。 Grunt.js v0.4ではgrunt-cliをインストールしてプロジェクトごとにGruntやプラグインをインストールして使用します。 プラグイ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://toybox-design.net/?p=664
捗るかもしれないフロントエンド開発環境