イナヅマTVログ

gulp

2015.01.21
11:00
author: taikiken
0 comments

Gulp 始めてみましたのメモ – 6 – Globbing patterns, Glob options

gulp の話というより Node.js の話です。
gulp.src で指定する ファイル・パターン と task に指定できる Node option の Document, サンプルです。

Node.js の理解度を上げないと…

Gulp 始めてみましたのメモ – 1 – 導入からCompass
Gulp 始めてみましたのメモ – 2 – CSSをminify
Gulp 始めてみましたのメモ – 3 – JavaScriptをconcat, minify, source mapとYUIDoc
Gulp 始めてみましたのメモ – 4 – taskを順に実行
Gulp 始めてみましたのメモ – 5 – コピーと削除, ファイル・ディレクトリ
の続き。
Continue Reading →

gulp

2015.01.20
11:00
author: taikiken
0 comments

Gulp 始めてみましたのメモ – 5 – コピーと削除, ファイル・ディレクトリ

やり方がまずいかもだけど、一時ファイルな最終的には不要ファイルやディレクトリができて削除が必要になりました。
作ったファイルやディレトリのコピーも必要になりました。

Gulp 始めてみましたのメモ – 1 – 導入からCompass
Gulp 始めてみましたのメモ – 2 – CSSをminify
Gulp 始めてみましたのメモ – 3 – JavaScriptをconcat, minify, source mapとYUIDoc
Gulp 始めてみましたのメモ – 4 – taskを順に実行
の続き。

コピー

gulp.src と gulp.dest でコピーが可能でした。

"use strict";
 
var gulp = require( 'gulp' );
var size = require('gulp-size');
 
gulp.task( 'copy', function () {
 
  return gulp.src(
    [
      'COPY_FROM_DIR/**/*.html',
      'COPY_FROM_DIR/**/*.js',
      'COPY_FROM_DIR/**/*.css'
    ]
  )
    .pipe( gulp.dest( 'COPY_TO_DIR' ) )
    .pipe( size( { title: '*** copy ***' } ) );
} );

gulp.src でファイルを指定します。
gulp.dest で出力先を指定します。

削除

Google さんの web-starter-kit/gulpfile.js を参考にしました。
github: google/web-starter-kit/gulpfile.js

del

npm del を使います。
documentによれば使い方は簡単なようです。

var del = require('del');
 
del(['tmp/*.js', '!tmp/unicorn.js'], function (err, deletedFiles) {
    console.log('Files deleted:', deletedFiles.join(', '));
});

第一引数に削除したいファイルやディレクトリを指定すれば良いようです。

gulp.task に組み込みます。

web-starter-kit

// Clean Output Directory
gulp.task('clean', del.bind(null, ['.tmp', 'dist/*', '!dist/.git'], {dot: true}));

web-starter-kitはdelをbindして使ってました。
こんな感じで使いました。

gulp.task( 'clean',
  del.bind( null,
    'REMOVE_ALL_DIR/*',
    {
        base: process.cwd(),
        dot: true
    }
  )
);

option base へ process.cwd() を設定しました。

Qiitaにとてもわかりやすい解説がありました。
Qiita: ファイル削除にはgulpプラグインを使わない

gulp

2015.01.16
11:00
author: taikiken
0 comments

Gulp 始めてみましたのメモ – 1 – 導入からCompass

成田(@nariyu)さんにお奨めされた Gulp 始めました。
圧倒的な Node.js の知識不足の中なんとか実践で使える感じになってきたので忘れないようにメモ。

Gulp.js

gulpjs.com
“Automate and enhance your workflow” だそうです。

gulp/docs/getting-started.md
gulp/docs/API.md
Continue Reading →

2014.11.10
18:02
author: taikiken
0 comments

SVG Animation, fill(塗り)色(color)遷移をCSS3でね

SVG fill(塗り)の色(color)遷移アニメーションをCSS3でねのメモ。

SVG作成ツールが揃いだし本格的にWebでも使われ始めてる様子。
リニューアル後のAppleサイトもSVGがあちらこちらと使われてたりしてます。

サイトに何かと組み込まれるアニメーション。
SVGでも対応できるようにしておかないと…

SVG の色指定

SVG fill 色指定あれこれ。
Continue Reading →

2014.11.07
16:19
author: taikiken
0 comments

[CSS] brタグを”, “と表示したい

ワンソースで様々な端末に対応させようとすると本来のタグとは違う表示にしたい欲求にかられます。

WordPressのようなCMS内部で生成されるタグだとプラグインかfunctions.phpへタグの出力をある端末だけ変更するようなコードを書いたりでも対応できたりするけど…
もっと手軽な感じにCSSを駆使するとそれっぽくできたりします。

あちこちで見かけるtableタグのMedia Queriesサンプルなんかみたいに。
Continue Reading →

2014.10.07
12:46
author: taikiken
0 comments

[JavaScript] TweenMax / TweenLite rotation 方向(direction)設定

TweenMax, TweenLite を使った回転アニメーションのメモ。

0 -> 180, 180 -> 360 と時計回り回転を分割実行した時 180 -> 360 が逆時計回りになるのを防ぐ。

DirectionalRotationPlugin

DirectionalRotationPlugin を使う方法があるらしい。
github: DirectionalRotationPlugin.js
Continue Reading →