Web制作が爆速になるGruntのプラグインを定番から最新のものまで10個ピックアップ！
Webサイトを制作する際、各種構成ファイルのコピーや削除、jsミニファイル、html・CSSの構文チェックなど、一つ一つ手でやるのは手間ですし、間違いの元にもなります。 タスク自動化ツール「Grunt」は、これらの作業すべてを自動化する優れものです。 プラグインで機能拡張もできるので、目的に応じてカスタマイズしてWebサイトをより効率的に制作することができます。 今回は、Gruntの定番・最新プラグインを厳選してご紹介します。 このニュースを読んだあなたにオススメ WordPressにプラグインを追加してみよう 作業効率に不可欠！WordPressオススメのプラグインまとめ 誰でも一瞬でできる！WordPressのプラグインを使ってAMPに対応する方法 Gruntを便利にしてくれる定番と最新のプラグイン10選 1.grunt-este-watch https://www.npmjs.com
必ず使うタスクランナーGulpとGruntの基本コード9選 - ICS MEDIA
みなさんはタスクランナーを使用していますか？ タスクランナーとは開発作業を自動化するためのツールで、2013年頃からWebのフロントエンド開発のトレンドとなっています。開発の現場では主にオープンソースのGulp（ガルプ）とGrunt（グラント）がよく使われています。 本記事ではGulpとGruntの両方の導入方法とウェブ制作でよく使用するプラグインの使い方を紹介します。GulpとGruntのいずれかはすでにインストールしているとして紹介します（記事末尾で付録としてインストール方法を解説しています）。 ※GruntとGulpの違いを知りたい方は記事「絶対つまずかないGulp入門」を参考ください。 この記事は2018年12月にリリースされたGulp 4に対応しています ファイルの複製 作業用のフォルダーからリリース用のフォルダーへファイルをコピーしたい時などに複製するタスクを登録しておくと便利
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
5 Grunt Tasks that Improve the Performance of Your Website — SitePoint
Many times on SitePoint I’ve mentioned how achieving good performance is a main concern today and how you should strive for fast web pages. In some articles of mine about JavaScript APIs, such as Introduction to the Resource Timing API and Discovering the User Timing API, I gave you all the power you need to know what’s slowing down your project. Earlier this year, Craig Buckler covered this topic
Five Grunt Tasks You Won't Want to Miss!
Unless you’ve lived under a stone for the past few months, you’ve surely heard about Grunt or one of the other task runners released like Gulp.js (more on this topic in our article An Introduction to Gulp.js ). This family of tools has taken the frontend landscape by storm, revolutioning the way thousands of developers deal with tedious activities like concatenation, minification, image optimizati
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のイ
GruntFrontOsaka 勉強会 - Qiita
2014/04/26 Sass+Compass+Gruntで快適コーディング @sigesaba さん 06/28 に産業創造館でPHP関西2014があるよー Task Runner GruntのTask Less/Sassのコンパイル ブラウザの自動リロード Javascript のコンパイル 自動化＝JavascriptでできるTask How do i Install? 黒い画面でインストールするので、難しい人は難しいかも Node.js Grunt-cli 2 つの設定ファイル package.json Grunt の依存を解消 grunt のプラグイン プラグインは公式から。 http://gruntjs.com/plugins GruntFile.js 実行するタスクを書く 自分でかけるけど、基本ひな形からコピペっぽい Sass + Compass + Grunt Grunt
grunt-spritesmithでcss spriteをやってみる
12 Jan 2014 grunt-spritesmithでcss spriteをやってみる CSS Spriteは普段、compassを使っているけれど、gruntでもできるとのことだったので試してみた。 gruntはほんま有能ですね。 プラグイン grunt-spritesmith Gruntfile.js module.exports = function (grunt) { // Configure grunt grunt.initConfig({ sprite:{ all: { src: 'src/images/icons/*.png', //スプライトにしたい画像達 destImg: 'src/images/common/sprite.png', //書きだした1枚画像の保存先 destCSS: 'src/sass/_sprite.scss', //生成されるcssと、その保存
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Front-end Build Tools - JTF2014 Tokyo
Automate Recurring Tasks with Grunt.js — SitePoint