[B! gulp] owo_rinのブックマーク

gulp.spritesmithを便利にカスタマイズ

gulp.spritesmithを便利にカスタマイズ「gulp.spritesmith」はCSSスプライトを生成するためのgulpプラグインです。 spritesmithの利用方法は『CSSスプライトを生成する「grunt-spritesmith」』を参照していいただくとしてgulpで行なったカスタマイズを紹介します。 gulpの使い方は「タスクランナーgulp入門」を参照してください。 gulp.spritesmithでちょっと面倒くさいなと感じていたのは1タスクで書き出されるスプライト画像のスプライト用のCSSが１つだということ。たとえば下記のように指定をすると「sprite」というディレクトリにスプライト用の画像を突っ込んでおくとsprite.pngとsprite.scsssというファイルが出力されます。 var spriteData = gulp.src('sprite/*.pn

owo_rin 2015/12/10

gulp
sprite

リンク

gulp.spritesmith の対象ディレクトリを自動取得する | BUN:Log

以前書いた記事 Grunt から gulp へ移行してみた： https://bun log.dreamseeker.dev/2014/06/08/gulpjs-setting/ を読み返してみて、そういえば gulp.spritesmith の対象ディレクトリを自動取得できるようにしてたな・・・と思い出したので、記事にしてみます。 gulp.spritesmith のインストールパッケージがインストールされていることが前提となりますので、下記コマンドを実行します。 $ npm install gulp.spritesmith --save-devプラグインを読み込むgulpfile.js では gulp.spritesmith を $.spritesmith で実行できるよう、gulp-load-plugins を読み込む際に置換しつつ変数にセットしておきます。 // load gulp.

owo_rin 2015/12/10

gulp

リンク

ES6 で書く環境を作る（gulp + Babel 編） - Qiita

前回の投稿(ES6 で書く環境を作る（WebStorm + Babel 編）)では Babel を WebStorm から実行しましたが、今回は WebStorm でなく gulp から実行してみます。 (柔軟性を考えると、こちらの方が良いかも。) 前提環境 OS：Mac OS X 10.9.5 Bable：5.4.7 gulp：3.8.11 gulp-babel：5.1.0 npm：2.7.5 手順 ① gulp と gulp-babel をインストール適当なプロジェクト用ディレクトリを作り、

owo_rin 2015/12/09

gulp

リンク

【保存版】クオリティアップ！gulp.jsで文法チェック！ - 学校では教えてくれないWeb制作の現場

2015-05-28 【保存版】クオリティアップ！gulp.jsで文法チェック！ Web制作の現場前回の記事に引き続き、gulp.jsです。今回は、制作のクオリティチェックに欠かせない、文法チェックのお話。いままで、HTML-lintや、W3Cのサービスにコピペして、確認して、間違いがあると修正して、また確認、、、なんて面倒くさいことをしておりましたが！このgulp.jsを使えばイチコロです。簡単ですので、ぜひご活用くださいませ。前回ご紹介した内容（gulpfile.js）に、下記を追加するだけでOKです。 HTML文法チェックまずは、プラグインをインストール。 $ npm install --save-dev gulp-htmlhint そして、gulpfile.jsに下記を追記します。 /////////////////////////////////////////