gulp初心者（タスクランナー自体初めて）が使ってみた際のメモです。
個人用テキストメモをそのまま貼り付けているため、書いた本人以外には分かりづらいと思いますので、詳細については本文中の各urlのページを参考にしてください。
gulp: note.txt
(OS:Windows7.32bit)
20161123
5分で導入！タスクランナーGulpでWeb制作を効率化しよう
https://ics.media/entry/3290
インストール
公式サイトよりダウンロード
https://nodejs.org/en/
参考：http://qiita.com/shosho/items/0a71a906b78bea0e1aa1
※バージョンについては4, 6などの偶数はLTS対応、5などの奇数は挑戦的な新機能を含むものらしい。
今回DLしたファイル Windows (x86)v6.9.1 LTS（node-v6.9.1-x86.msi）
任意の場所にmyprojectフォルダを作成してコマンドラインで移動
cd C:\data\coding\myproject
Gulpにおけるタスク処理の基本
https://ics.media/entry/3290/3
// gulpプラグインの読み込み
var gulp = require("gulp");
// 画像を圧縮するプラグインの読み込み
var imagemin = require("gulp-imagemin");
// imagesフォルダ以下のpng画像を圧縮してminifies_imagesフォルダに保存するタスクの定義
gulp.task("imageMinTask", function() { // 「imageMinTask」という名前のタスクを登録
gulp.src("images/*.png") // imagesフォルダー以下のpng画像を取得
.pipe(imagemin()) // 画像の圧縮処理を実行
.pipe(gulp.dest("minified_images/")); // minified_imagesフォルダ以下に保存
});
watch機能を使えばファイルの更新後に自動で処理を実行できる
https://ics.media/entry/3290/4
var gulp = require("gulp");
var imagemin = require("gulp-imagemin");
gulp.task("watchTask", function() {
gulp.watch("images/**", function() { // imagesフォルダ以下のファイルを監視
gulp.src("images/*.png")
.pipe(imagemin())
.pipe(gulp.dest("minified_images/"));
});
});
20161124
dotinstall gulp入門
必要となる知識について
このレッスンに必要な知識に関しては以下のレッスンを参照とのこと。
・ローカル開発環境の構築 (全13回)
http://dotinstall.com/lessons/basic_local_development_v2
・Node.js入門 (全16回)
http://dotinstall.com/lessons/basic_nodejs
・CoffeeScript入門 (全13回)
http://dotinstall.com/lessons/basic_coffeescript
※インストールや環境構築は先でやってしまったので、この辺は割愛。
また、CoffeeScriptも今のところ使う予定が無いので飛ばして進める。
01 gulpとは何か？
概要
- フロントエンドのタスクを自動化（タスクランナー） gulpに似たツール…grunt 近年はgulpが人気高い公式サイト
http://gulpjs.com/知識
環境
vagrant / CentOS 6.5
※今回レッスン指定の環境を使わず、先にインストールした環境で実習してみた
02 gulpをインストールしよう
- epel
- Node.js / npm
- gulp.js
03 package.jsonを作ろう
フォルダを作る
cmd… mkdir [フォルダ名]（フォルダを作成コマンド）
作ったフォルダに移動
cmd… cd C:\data\coding\myproject
package.jsonの雛形を作る
cmd… npm init
とりあえず質問には全部Enterで良い（設定は後で変更可能）
gulpのインストール
cmd… npm install --sabe-dev gulp
省略形… npm i -D gulp
package.json の情報から同じ環境を再現可能
cmd… npm install
package.json と同じ内容がインストールされる
04 gulp.task()を使ってみよう
「Helo!world」を表示させてみる
gulpを実行するために gulpfile.js を作成する
var gulp = require("gulp"); // gulpを読み込む。requireの読み方はリクワイヤー
var gulp = require("gulp");
gulp.task('hello', function() {
console.log('hello world!');
});
これを実行するには
cmd… gulp hwllo（関数名）
関数をデフォルト指定することで gulpコマンドのみで実行させることも可能
var gulp = require("gulp");
gulp.task('hello', function() {
console.log('hello world!');
});
gulp.task('default', ['hello']);
cmd… gulp
先と同じ実行結果となる
05 gulp.src()､gulp.dest()を使ってみよう
ソースフォルダ（src）にある開発用のファイルをコピーしてディストリビューションフォルダ（dist）に入れる
// crc -> dist
var gulp = require("gulp");
// ファイルの指定
// gulp.src('./src/index.html') // 一つ指定する場合
// gulp.src(['./src/index.html', './src/main.html']) // 複数指定する場合は配列で
// gulp.src('./src/*.html') // src内の全てのhtmlを指定する場合
// gulp.src('./src/**/*.html') // src内の全てのフォルダ内のhtmlを指定する場合
// gulp.src(['./src/index.html', '!./src/donotcopy.html']) // 変更したくないファイルは否定の指定も可能
gulp.task('html', function() {
gulp.src('./src/index.html')
.pipe(gulp.dest('./dist'));
});
gulp.task('default', ['html']);
実行すると
cmd… gulp
distフォルダが作成されて中にindex.htmlのコピーができている
06 タスクの実行順序について理解しよう
複数のタスクを実行させる場合
var gulp = require("gulp");
gulp.task('html', function() {
gulp.src('./src/index.html')
.pipe(gulp.dest('./dist'));
});
ulp.task('msg', function() {
console.log('hello');
});
gulp.task('default', ['html', 'msg']); // 並列処理のため、この場合実行順序は予測できない
実行順序を指定した書き方
[html]→[msg]の順番にしたい場合
var gulp = require("gulp");
gulp.task('html', function() {
return gulp.src('./src/index.html') // 関数 msg の引数に返すため return を付ける
.pipe(gulp.dest('./dist'));
});
gulp.task('msg', ['html'], function() { // html関数完了後に実行するために 第二引数を追加
console.log('html copy done!');
});
gulp.task('default', ['msg']); // msg を実行すると html も呼び出され実行される
07 gulp-imageminを使ってみよう
まずはgulp-imageminをインストール
cmd… npm i -D gulp-imagemin
index.htmlをdistへコピーしつつ、画像を最適化してみる
var gulp = require("gulp");
var imagemin = require("gulp-imagemin"); // プラグインimageminの読み込み
gulp.task('html', function() {
gulp.src('./src/index.html')
.pipe(gulp.dest('./dist'));
});
gulp.task('img', function() {
gulp.src('./src/img/*.jpg') // imgフォルダ内の全てのjpgファイル
.pipe(imagemin()) // imageminを実行
.pipe(gulp.dest('./dist/img')); // 出力先を指定
});
gulp.task('default', ['html', 'img']);
実行してみる
cmd… gulp
画像が圧縮されてdist/img内に
08 gulp-coffee､gulp-concat､gulp-uglifyを使おう
coffeeフォルダ内のsctiptファイルをJavaScriptに変換してdist内へ
script1.coffeeとscript2.coffeeを結合して圧縮までやってみる
まず必要なプラグインをインストールする
・gulp-coffee（コーヒー）…CoffeeScriptをJavaScriptに変換する
・gulp-concat（コンカット）…ファイルを結合する
・gulp-uglify（アングリファイ）…ファイルを圧縮する
cmd… npm i -D gulp-coffee gulp-concat gulp-uglify
※続けてプラグイン名を記述することで、まとめてインストール可能
var gulp = require("gulp");
var imagemin = require("gulp-imagemin");
var coffee = require("gulp-coffee");
var concat = require("gulp-concat");
var uglify = require("gulp-uglify");
gulp.task('html', function() {
gulp.src('./src/index.html')
.pipe(gulp.dest('./dist'));
});
gulp.task('img', function() {
gulp.src('./src/img/*.jpg')
.pipe(imagemin())
.pipe(gulp.dest('./dist/img'));
});
gulp.task('js', function() {
gulp.src('./src/coffee/*.coffee')
.pipe(coffee())
.pipe(concat('all.min.js')) // 結合の際はファイル名を指定する
.pipe(uglify())
.pipe(gulp.dest('./dist/js'));
});
gulp.task('default', ['html', 'img', 'js']);
09 gulp.watch()を使ってみよう
毎回gulpコマンドを実行しなくても済むように
ファイルを監視して変更があれば自動的に実行するようにする
var gulp = require("gulp");
var imagemin = require("gulp-imagemin");
var coffee = require("gulp-coffee");
var concat = require("gulp-concat");
var uglify = require("gulp-uglify");
gulp.task('html', function() {
gulp.src('./src/index.html')
.pipe(gulp.dest('./dist'));
});
gulp.task('img', function() {
gulp.src('./src/img/*.jpg')
.pipe(imagemin())
.pipe(gulp.dest('./dist/img'));
});
gulp.task('js', function() {
gulp.src('./src/coffee/*.coffee')
.pipe(coffee())
.pipe(concat('all.min.js'))
.pipe(uglify())
.pipe(gulp.dest('./dist/js'));
});
gulp.task('watch', function() {
gulp.watch('./src/coffee/*.coffee', ['js']); // 指定ディレクトリ内で変更があれば引数の関数を実行する
});
gulp.task('default', ['html', 'img', 'js', 'watch']);
実行する
cmd… gulp
実行されるが、コマンドが終了せずに監視状態になる
このままscript1.coffeeに変更を加えてみると…
自動実行されてdist内に反映される
監視状態は ctrl+c で終了できる
10 gulp-plumberを使ってみよう
watch監視による自動実行は便利だが、エラー時に止まってしまう欠点がある
その場合はgulpコマンドを再度実行する必要が出てしまい不便なので、
それを補うためのプラグインをインストールする
cmd… npm i -D gulp-plumber
var gulp = require("gulp");
var imagemin = require("gulp-imagemin");
var coffee = require("gulp-coffee");
var concat = require("gulp-concat");
var uglify = require("gulp-uglify");
var plumber = require("gulp-plumber");
gulp.task('html', function() {
gulp.src('./src/index.html')
.pipe(gulp.dest('./dist'));
});
gulp.task('img', function() {
gulp.src('./src/img/*.jpg')
.pipe(imagemin())
.pipe(gulp.dest('./dist/img'));
});
gulp.task('js', function() {
gulp.src('./src/coffee/*.coffee')
.pipe(plumber()) // エラーの出そうな所に入れておくと、エラー表示はされるが、watch監視自動実行が停止しない
.pipe(coffee())
.pipe(concat('all.min.js'))
.pipe(uglify())
.pipe(gulp.dest('./dist/js'));
});
gulp.task('watch', function() {
gulp.watch('./src/coffee/*.coffee', ['js']);
});
gulp.task('default', ['html', 'img', 'js', 'watch']);
script1.coffeeのスクリプト記述をわざと間違えて確認してみる
→cmdにエラーは表示されるが、監視状態は停止しない
スクリプトを正常に戻してみる
→自動で実行されるのが確認できる
11 gulp-headerを使ってみよう
ファイルを変換した時に何かしらのヘッダーを入れたいときに使える
プラグインをインストール
cmd… npm i -D gulp-header
var gulp = require("gulp");
var imagemin = require("gulp-imagemin");
var coffee = require("gulp-coffee");
var concat = require("gulp-concat");
var uglify = require("gulp-uglify");
var plumber = require("gulp-plumber");
var header = require("gulp-header");
gulp.task('html', function() {
gulp.src('./src/index.html')
.pipe(gulp.dest('./dist'));
});
gulp.task('img', function() {
gulp.src('./src/img/*.jpg')
.pipe(imagemin())
.pipe(gulp.dest('./dist/img'));
});
gulp.task('js', function() {
gulp.src('./src/coffee/*.coffee')
.pipe(plumber())
.pipe(coffee())
.pipe(concat('all.min.js'))
.pipe(uglify())
.pipe(header('/* copyright @taguch */')) // 処理の終わりの辺りに 引数でメッセージを入れることができる
.pipe(gulp.dest('./dist/js'));
});
gulp.task('watch', function() {
gulp.watch('./src/coffee/*.coffee', ['js']);
});
gulp.task('default', ['html', 'img', 'js', 'watch']);
実行してみる
cmd… gulp
実行結果のall.min.jsにメッセージが入っていることが確認できる
次に、テンプレート的な使い方も可能
var gulp = require("gulp");
var imagemin = require("gulp-imagemin");
var coffee = require("gulp-coffee");
var concat = require("gulp-concat");
var uglify = require("gulp-uglify");
var plumber = require("gulp-plumber");
var header = require("gulp-header");
gulp.task('html', function() {
gulp.src('./src/index.html')
.pipe(gulp.dest('./dist'));
});
gulp.task('img', function() {
gulp.src('./src/img/*.jpg')
.pipe(imagemin())
.pipe(gulp.dest('./dist/img'));
});
gulp.task('js', function() {
gulp.src('./src/coffee/*.coffee')
.pipe(plumber())
.pipe(coffee())
.pipe(concat('all.min.js'))
.pipe(uglify())
//.pipe(header('/* copyright @taguchi */')) // 処理の終わりの辺りに 引数でメッセージを入れることができる
.pipe(header('/* copyright <%= name %> */', {name: 'taguchi'})) // 変数の利用が可能。第二引数で変数を引き渡すこともできる
.pipe(gulp.dest('./dist/js'));
});
gulp.task('watch', function() {
gulp.watch('./src/coffee/*.coffee', ['js']);
});
gulp.task('default', ['html', 'img', 'js', 'watch']);
実行すると同じ結果が得られることが確認できる
次にpakage.jsonの情報を表示させてみる
var gulp = require("gulp");
var pkg = require("./package.json"); // package.json の情報を取得
var imagemin = require("gulp-imagemin");
var coffee = require("gulp-coffee");
var concat = require("gulp-concat");
var uglify = require("gulp-uglify");
var plumber = require("gulp-plumber");
var header = require("gulp-header");
gulp.task('html', function() {
gulp.src('./src/index.html')
.pipe(gulp.dest('./dist'));
});
gulp.task('img', function() {
gulp.src('./src/img/*.jpg')
.pipe(imagemin())
.pipe(gulp.dest('./dist/img'));
});
gulp.task('js', function() {
gulp.src('./src/coffee/*.coffee')
.pipe(plumber())
.pipe(coffee())
.pipe(concat('all.min.js'))
.pipe(uglify())
//.pipe(header('/* copyright @taguchi */')) // 処理の終わりの辺りに 引数でメッセージを入れることができる
//.pipe(header('/* copyright <%= name %> */', {name: 'taguchi'})) // 変数の利用が可能。第二引数で変数を引き渡すこともできる
.pipe(header('/* copyright <%= pkg.name %> */', {pkg: pkg})) // package.jsonからの情報を表示させる
.pipe(gulp.dest('./dist/js'));
});
gulp.task('watch', function() {
gulp.watch('./src/coffee/*.coffee', ['js']);
});
gulp.task('default', ['html', 'img', 'js', 'watch']);
実行してみる
pakage.jsonのnameが反映されることが確認できる
12 gulp-webserverを使ってみよう
ライブリーロード…gulpでファイルの変更を検出したら自動的にブラウザをリロード
ipアドレスが必要なため確認する
cmd… ip a（今回はipconfigで）
表示されたipアドレスは後で使う
プラグインをインストール
cmd… npm i -D gulp-webserver
var gulp = require("gulp");
var pkg = require("./package.json"); // package.json の情報を取得
var imagemin = require("gulp-imagemin");
var coffee = require("gulp-coffee");
var concat = require("gulp-concat");
var uglify = require("gulp-uglify");
var plumber = require("gulp-plumber");
var header = require("gulp-header");
var webserver = require("gulp-webserver");
gulp.task('html', function() {
gulp.src('./src/index.html')
.pipe(gulp.dest('./dist'));
});
gulp.task('img', function() {
gulp.src('./src/img/*.jpg')
.pipe(imagemin())
.pipe(gulp.dest('./dist/img'));
});
gulp.task('js', function() {
gulp.src('./src/coffee/*.coffee')
.pipe(plumber())
.pipe(coffee())
.pipe(concat('all.min.js'))
.pipe(uglify())
.pipe(header('/* copyright <%= pkg.name %> */', {pkg: pkg}))
.pipe(gulp.dest('./dist/js'));
});
gulp.task('watch', function() {
gulp.watch('./src/coffee/*.coffee', ['js'])
gulp.watch('./src/*.html', ['html'])
});
gulp.task('webserver', function() {
gulp.src('./dist')
.pipe(
webserver({
host: '192.168.11.4', // 先に確認したipを指定
livereload: true // 自動リロードをtrueに
})
);
})
gulp.task('default', ['html', 'img', 'js', 'watch', 'webserver']);
実行するとwebserverのipが表示される
今回の場合は http://192.168.11.4:8000/
このアドレスでブラウザ表示
<html>
hello! from gulp! hogehoge
</html>
index.htmlファイルの内容を変更・保存すると、
ブラウザが自動リロードするのが確認できる。
【Gulp.js入門】新鋭フロンエンド・タスクランナーツール を試してみました
http://dev.classmethod.jp/tool/gulpjs-part-001/
Gulpの場合ファイルの削除には、「del」というプラグインを使用します。
インストール
cmd… npm i -D del
Gulpでファイル名を変更して出力する場合は「gulp-rename」を使用します。
cmd… npm i -D gulp-rename
TypeScriptのコンパイルには「gulp-typescript」を使用します。
cmd… npm i -D gulp-typescript
Sassのコンパイルには「gulp-sass」を使用します。
cmd… npm i -D gulp-sass
ブラウザ確認が一瞬！
Grunt・Gulpと始めるBrowsersync入門
https://ics.media/entry/3405
インストール
cmd… npm i -D browser-sync
Browsersyncを利用してお手軽ブラウザ確認環境をつくろう
http://tech.medpeer.co.jp/entry/2015/06/09/071758
サックっとbrowser-syncを設定
http://qiita.com/itoz/items/2bd246606c69c33684e8
var gulp = require('gulp');
var browserSync =require('browser-sync');
gulp.task('default', ['browser-sync']);
gulp.task('browser-sync', function() {
browserSync({
server: {
baseDir: "./src/" //対象ディレクトリ
,index : "index.html" //インデックスファイル
}
});
});
//
//ブラウザリロード
//
gulp.task('bs-reload', function () {
browserSync.reload();
});
//
//監視ファイル
//
gulp.task('default', ['browser-sync'], function () {
gulp.watch("./src/*.html", ['bs-reload']);
});
同期するhtmlにDOCTYPE,html,bodyタグが無いと正常に同期しない場合があるので注意
これからはじめるGulp #1
http://dev.classmethod.jp/client-side/javascript/gulp-solo-adv-cal-01/
元ページ：http://whiskers.nukos.kitchen/2014/12/01/gulp-adv-cal.html
macでのインストール手順等 割愛
これからはじめるGulp #2：gulp-sassを使ってSCSSをコンパイルするタスクを作ってみる
http://dev.classmethod.jp/client-side/javascript/gulp-solo-adv-cal-02/
ディレクトリを作成 C:\data\coding\myproject
cmd… cd src（srcディレクトリに移動）
cmd… mkdir scss（scssフォルダ作成）
cmd… cd scss（scssディレクトリに移動）
ファイルを作成 参考：http://kiyotakakubo.hatenablog.com/entry/20090214/1234622897
cmd… C:> type nul > style.scss
var gulp =require('gulp');
var sass =require('gulp-sass');
gulp.task('sass', function() {
gulp.src('./src/scss/*.scss')
.pipe(sass())
.pipe(gulp.dest('./dist/css'))
});
gulp.task('default', ['sass']);
実行
cmd… gulp sass
dist内にcssフォルダとstyle.cssが出力されてれば成功
20161126
これからはじめるGulp（3）：gulp.watchでファイルの変更を監視しタスクを実行する
http://whiskers.nukos.kitchen/2014/12/03/gulp-watch.html
var gulp = require('gulp');
var sass = require('gulp-sass');
gulp.task('sass', function() {
gulp.src('./src/scss/*.scss')
.pipe(sass())
.pipe(gulp.dest('./dist/css/'));
});
gulp.task('watch', function() {
var watcher = gulp.watch('./src/scss/*.scss', ['sass']);
})
gulp.task('default', ['sass']);
scssファイルを編集すると、distへ反映される
次にイベントリスナーを使った方法をやってみる
var gulp = require('gulp');
var sass = require('gulp-sass');
gulp.task('sass', function() {
gulp.src('./src/scss/*.scss')
.pipe(sass())
.pipe(gulp.dest('./dist/css/'));
});
gulp.task('watch',['sass'], function() {
var watcher = gulp.watch('./src/scss/*.scss', ['sass']);
watcher.on('change', function(event) {
console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
});
});
gulp.task('default', ['sass']);
これからはじめるGulp（4）：gulp-connectモジュールを使ったローカルサーバの起動
http://whiskers.nukos.kitchen/2014/12/04/gulp-connect.html
gulp-connectのインストールと読み込み
cmd… npm i -D gulp-connect
準備：index.htmlを作る
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Gulp Hello world</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
コピータスクを作る
var gulp = require('gulp');
var sass = require('gulp-sass');
var connect =require('gulp-connect');
gulp.task('sass', function() {
gulp.src('./src/scss/*.scss')
.pipe(sass())
.pipe(gulp.dest('./dist/css/'));
});
gulp.task('copy', function() {
gulp.src('./src/*.html')
.pipe(gulp.dest('./dist'));
});
gulp.task('watch',['sass'], function() {
var watcher = gulp.watch('./src/scss/*.scss', ['sass']);
watcher.on('change', function(event) {
console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
});
});
gulp.task('default', ['sass']);
cmd… gulp copy
監視対象にhtmlを追加する
var gulp = require('gulp');
var sass = require('gulp-sass');
var connect =require('gulp-connect');
gulp.task('sass', function() {
gulp.src('./src/scss/*.scss')
.pipe(sass())
.pipe(gulp.dest('./dist/css/'));
});
gulp.task('copy', function() {
gulp.src('./src/*.html')
.pipe(gulp.dest('./dist'));
});
gulp.task('watch',['sass', 'copy'], function() {
gulp.watch('./src/sass/*.sass', ['sass']);
gulp.watch('./src/*.html', ['copy']);
});
gulp.task('default', ['sass']);
cmd… gulp watch
htmlを変更してタスク実行されるかを確認
serveタスクを作る
var gulp = require('gulp');
var sass = require('gulp-sass');
var connect =require('gulp-connect');
gulp.task('sass', function() {
gulp.src('./src/scss/*.scss')
.pipe(sass())
.pipe(gulp.dest('./dist/css/'));
});
gulp.task('copy', function() {
gulp.src('./src/*.html')
.pipe(gulp.dest('./dist'));
});
gulp.task('watch',['sass', 'copy'], function() {
gulp.watch('./src/sass/*.sass', ['sass']);
gulp.watch('./src/*.html', ['copy']);
});
gulp.task('serve', function() {
connect.server();
});
gulp.task('default', ['sass']);
cmd… gulp serve
ローカルサーバーの起動を確認（停止には ctrl+c）
rootディレクトリを指定する、
defaultタスクで必要なタスクをすべて実行する
var gulp = require('gulp');
var sass = require('gulp-sass');
var connect =require('gulp-connect');
gulp.task('sass', function() {
gulp.src('./src/scss/*.scss')
.pipe(sass())
.pipe(gulp.dest('./dist/css/'));
});
gulp.task('copy', function() {
gulp.src('./src/*.html')
.pipe(gulp.dest('./dist'));
});
gulp.task('watch',['sass', 'copy'], function() {
gulp.watch('./src/sass/*.sass', ['sass']);
gulp.watch('./src/*.html', ['copy']);
});
gulp.task('serve', function() {
connect.server({
root: './dist'
});
});
gulp.task('default', ['watch', 'serve']);
cmd… gulp
起動を確認
これからはじめるGulp（5）：gulp-connectモジュールを使ったLiveReload
http://whiskers.nukos.kitchen/2014/12/05/gulp-livereload.html
serveタスクオプションでLibeReloadを有効化( livereload: true)、
scss,htmlの変更に合せてリロードする
var gulp = require('gulp');
var sass = require('gulp-sass');
var connect =require('gulp-connect');
gulp.task('sass', function() {
gulp.src('./src/scss/*.scss')
.pipe(sass())
.pipe(gulp.dest('./dist/css/'))
.pipe(connect.reload());
});
gulp.task('copy', function() {
gulp.src('./src/*.html')
.pipe(gulp.dest('./dist'))
.pipe(connect.reload());
});
gulp.task('watch',['sass', 'copy'], function() {
gulp.watch('./src/sass/*.sass', ['sass']);
gulp.watch('./src/*.html', ['copy']);
});
gulp.task('serve', function() {
connect.server({
root: './dist',
livereload: true
});
});
gulp.task('default', ['watch', 'serve']);
cmd… gulp
実行できたことを確認
ブラウザ拡張機能をインストールして同期（対応ブラウザはSafari, Chrome, Firefox
※Browsersyncで同等の動作可能なので、割愛
これからはじめるGulp（6）：gulp-plumberとgulp-notifyを使ったデスクトップ通知
http://whiskers.nukos.kitchen/2014/12/06/gulp-notify.html
・gulp-plumberについて
エラーによってwatch監視が停止することを防止するプラグイン（※導入済）
・gulp-notify
通常コマンドラインのみ表示されるエラーをデスクトップ通知する
gulp-plumberでエラーによる強制停止を防止
var gulp = require('gulp');
var sass = require('gulp-sass');
var connect =require('gulp-connect');
var plumber = require('gulp-plumber');
gulp.task('sass', function() {
gulp.src('./src/scss/*.scss')
.pipe(plumber())
.pipe(sass())
.pipe(gulp.dest('./dist/css/'))
.pipe(connect.reload());
});
gulp.task('copy', function() {
gulp.src('./src/*.html')
.pipe(gulp.dest('./dist'))
.pipe(connect.reload());
});
gulp.task('watch',['sass', 'copy'], function() {
gulp.watch('./src/scss/*.scss', ['sass']);
gulp.watch('./src/*.html', ['copy']);
});
gulp.task('serve', function() {
connect.server({
root: './dist',
livereload: true
});
});
gulp.task('default', ['watch', 'serve']);
cmd… gulp
わざとscssファイルの記述を間違えて
エラーが出ても停止しないことを確認
gulp-notifyでエラーを通知する
インストール
cmd… npm i -D gulp-notify
gulp-notify通知処理を追加
var gulp = require('gulp');
var sass = require('gulp-sass');
var connect =require('gulp-connect');
var plumber = require('gulp-plumber');
var notify = require('gulp-notify');
gulp.task('sass', function() {
gulp.src('./src/scss/*.scss')
.pipe(plumber({
errorHandler: notify.onError("Error: <%= error.message %>")
}))
.pipe(sass())
.pipe(gulp.dest('./dist/css/'))
.pipe(connect.reload());
});
gulp.task('copy', function() {
gulp.src('./src/*.html')
.pipe(gulp.dest('./dist'))
.pipe(connect.reload());
});
gulp.task('watch',['sass', 'copy'], function() {
gulp.watch('./src/scss/*.scss', ['sass']);
gulp.watch('./src/*.html', ['copy']);
});
gulp.task('serve', function() {
connect.server({
root: './dist',
livereload: true
});
});
gulp.task('default', ['watch', 'serve']);
わざと間違えたscss記述にしてエラーを確認してみる
これからはじめるGulp（7）：require-dirモジュールを使ったタスク単位のファイル分割
http://whiskers.nukos.kitchen/2014/12/07/gulp-require-dir.html
pathモジュールを読み込む、
パスを変数から呼び出す
タスクのglobをタスクのローカル変数で管理する
var gulp = require('gulp');
var path =require('path');
var sass = require('gulp-sass');
var connect =require('gulp-connect');
var plumber = require('gulp-plumber');
var notify = require('gulp-notify');
var paths = {
srcDir: 'src',
dstDir: 'dist'
}
gulp.task('sass', function() {
var srcGlob = paths.srcDir + 'scss/*.scss';
var dstGlob = paths.dstDir + 'css';
var errorMessage = "Error: <%= error.message %>";
gulp.src('./src/scss/*.scss')
.pipe(plumber({
errorHandler: notify.onError("Error: <%= error.message %>")
}))
.pipe(sass())
.pipe(gulp.dest('./dist/css/'))
.pipe(connect.reload());
});
gulp.task('copy', function() {
gulp.src('./src/*.html')
.pipe(gulp.dest('./dist'))
.pipe(connect.reload());
});
gulp.task('watch',['sass', 'copy'], function() {
gulp.watch('./src/scss/*.scss', ['sass']);
gulp.watch('./src/*.html', ['copy']);
});
gulp.task('serve', function() {
connect.server({
root: './dist',
livereload: true
});
});
gulp.task('default', ['watch', 'serve']);
タスク毎にファイルを分割する
まず require-dirのインストール
cmd… npm i -D require-dir
require-dirの読み込み
var requireDir = require('require-dir');
var dir = require('./tasks');
// var dir = require('./tasks', {recurse: true}); // 下層ディレクトリも再帰的に呼び出したい場合はオプション recurse: true で有効にする
ファイルを分ける
sassタスクとcopyタスクを別ファイルに
var gulp = require('gulp');
var requireDir = require('require-dir');
var dir = requireDir('./src/tasks');
var path = require('path');
var connect = require('gulp-connect');
var paths = {
srcDir: 'src',
dstDir: 'dist'
}
gulp.task('serve', function() {
connect.server({
root: paths.dstDir,
livereload: true
});
});
gulp.task('watch', ['sass', 'copy'], function() {
var scssWatchGlob = paths.srcDir + 'scss/*.scss';
var htmlWatchGlob = paths.srcDir + '/*.html';
gulp.watch( scssWatchGlob, ['sass']);
gulp.watch( htmlWatchGlob, ['copy']);
});
gulp.task('default', ['watch', 'serve']);
var gulp = require('gulp');
var path = require('path');
var sass = require('gulp-sass');
var plumber = require('gulp-plumber');
var notify = require('gulp-notify');
var connect = require('gulp-connect');
var paths = {
srcDir: 'src',
dstDir: 'dist'
}
gulp.task('sass', function() {
var srcGlob = paths.srcDir + 'sass/*.scss';
var dstGlob = paths.dstDir + '/css';
var errorMessage = 'Error: <%= error.message %>';
gulp.src( srcGlob )
.pipe(plumber({
errorHandler: notify.onError( errorMessage )
}))
.pipe(sass())
.pipe(gulp.dest( dstGlob ))
.pipe(connect.reload());
});
var gulp = require('gulp');
var connect = require('gulp-connect');
var paths = {
srcDir: 'src',
dstDir: 'dist'
}
gulp.task('copy', function() {
var srcGlob = paths.srcDir + '/*.html';
var dstGlob = paths.dstDir;
gulp.src( srcGlob )
.pipe(gulp.dest( dstGlob ))
.pipe(connect.reload());
});
cmd… gulp
実行を確認
20161127
これからはじめるGulp（8）：delモジュールとvinyl-pathsモジュールを使ったファイルの削除
http://whiskers.nukos.kitchen/2014/12/08/gulp-del.html
※del導入済、その他は導入未定のため割愛
これからはじめるGulp（9）：Ruby版Sassが使えるgulp-ruby-sassへの乗り換え
http://whiskers.nukos.kitchen/2014/12/09/gulp-ruby-sass.html
※いまのところ導入予定無し 割愛
これからはじめるGulp（10）：deprecatedになっていたgulp-connectからgulp-webserverへ乗り換える
http://whiskers.nukos.kitchen/2014/12/10/gulp-webserver.html
※同等機能BrowserSync導入済のため割愛
これからはじめるGulp（11）：ブラウザ間でスクロールやクリック操作を同期できるBrowserSync
http://whiskers.nukos.kitchen/2014/12/11/gulp-browser-sync.html
※導入済のため割愛
これからはじめるGulp（12）：gulp-imageminプラグインを使ったJPEG,PNG,GIF,SVGの最適化
http://whiskers.nukos.kitchen/2014/12/12/gulp-imagemin.html
※導入済み、練習してみる
var gulp = require('gulp');
var imagemin = require('gulp-imagemin');
var paths = {
srcDir: './src/img',
dstDir: './dist/img'
}
gulp.task( 'imagemin', function(){
var srcGlob = paths.srcDir + '/**/*.+(jpg|jpeg|png|gif|svg)';
var dstGlob = paths.dstDir;
var imageminOptions = {
optimizationLevel: 7
};
gulp.src( srcGlob )
.pipe(imagemin( imageminOptions ))
.pipe(gulp.dest( dstGlob ));
});
cmd… gulp imagemin
実行で圧縮されていることを確認
これからはじめるGulp（13）：gulp-changedプラグインで変更されたファイルだけを処理させる
http://whiskers.nukos.kitchen/2014/12/13/gulp-changed.html
- gulp-changed 変更されたファイルだけ処理させる
インストール
cmd… npm i -D gulp-changed
コードに追加、実行してみる
var gulp = require('gulp');
var imagemin = require('gulp-imagemin');
var changed = require('gulp-changed'); // 読み込み
var paths = {
srcDir: 'src/img',
dstDir: 'dist/img'
}
gulp.task( 'imagemin', function(){
var srcGlob = paths.srcDir + '/**/*.+(jpg|jpeg|png|gif|svg)';
var dstGlob = paths.dstDir;
var imageminOptions = {
optimizationLevel: 7
};
gulp.src( srcGlob )
.pipe(changed( dstGlob )) // 処理を追加
.pipe(imagemin( imageminOptions ))
.pipe(gulp.dest( dstGlob ));
});
cmd… gulp imagemin
何も変更されていないファイルで実行してみる
→処理はスルーされる
これからはじめるGulp（14）：gulp-cachedプラグインで変更されたSCSSファイルだけを処理させる
http://whiskers.nukos.kitchen/2014/12/14/gulp-cached.html
- gulp-cached 対象ファイルをキャッシュし、変更分のみを処理させる
インストール
npm i -D gulp-cached
処理を追加
var gulp = require('gulp');
var path = require('path');
var sass = require('gulp-sass');
var plumber = require('gulp-plumber');
var notify = require('gulp-notify');
var cache = require('gulp-cached');
var browserSync = require('browser-sync');
var reload = browserSync.reload;
var paths = {
srcDir : './src',
dstDir : './dist'
}
gulp.task('sass', function(){
var srcGlob = paths.srcDir + '/scss/**/*.scss';
var dstGlob = paths.dstDir + '/css';
var errorMessage = "Error: <%= error.message %>";
// var sassOptions = {
// bundleExec : true,
// style : 'nested',
// require : ['bourbon', 'neat'],
// loadPath : ['vendor/bundle/ruby/2.1.0/gems/bitters-0.10.1/app/assets/stylesheets']
// }
gulp.src( srcGlob )
.pipe(cache( 'sass' )) // キャッシュ処理
.pipe(plumber({
errorHandler: notify.onError( errorMessage )
}))
//.pipe(sass( sassOptions ))
.pipe(sass())
.pipe(gulp.dest( dstGlob ))
.pipe(reload({stream:true}));
});
var gulp = require('gulp');
var path = require('path');
var requireDir = require('require-dir');
var dir = requireDir('./src/tasks', {recurse: true});
var browserSync = require('browser-sync');
var paths = {
srcDir : './src',
dstDir : './dist'
}
gulp.task('browser-sync', function() {
browserSync({
server: {
baseDir: paths.dstDir,
index : "index.html"
}
});
});
gulp.task('watch', ['sass', 'copy'], function(){
var scssWatchGlob = paths.srcDir + '/scss/*.scss';
var htmlWatchGlob = paths.srcDir + '/*.html';
var watcher = gulp.watch( scssWatchGlob, ['sass']);
watcher.on('change', function(event) {
console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
});
gulp.watch( htmlWatchGlob, ['copy']);
});
gulp.task('default', ['watch', 'browser-sync']);
その他のファイル
var gulp = require('gulp');
var browserSync = require('browser-sync');
var paths = {
srcDir: 'src',
dstDir: 'dist'
}
gulp.task('copy', function() {
var srcGlob = paths.srcDir + '/*.html';
var dstGlob = paths.dstDir;
gulp.src( srcGlob )
.pipe(gulp.dest( dstGlob ))
.pipe(browserSync.reload({stream:true}));
});
var gulp = require('gulp');
var imagemin = require('gulp-imagemin');
var changed = require('gulp-changed'); // 読み込み
var paths = {
srcDir: 'src/img',
dstDir: 'dist/img'
}
gulp.task( 'imagemin', function(){
var srcGlob = paths.srcDir + '/**/*.+(jpg|jpeg|png|gif|svg)';
var dstGlob = paths.dstDir;
var imageminOptions = {
optimizationLevel: 7
};
gulp.src( srcGlob )
.pipe(changed( dstGlob )) // 処理を追加
.pipe(imagemin( imageminOptions ))
.pipe(gulp.dest( dstGlob ));
});
$color: #fff;
body {
background: $color;
border: 1px solid #f00;
}
@import "test";
h1 {
color: #f0f;
}
@import "test";
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Gulp Hello world</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
cmd… gulp
実行して、scssファイルを変更してみると、該当cssのみが処理出力される。
cachedが無い場合は1ファイルのみの変更でも全cssファイルが出力されてしまう。
ディレクトリ構成
myproject
├─ node_modules
├─ package.json
│
├─ gulpfile.js // メイン処理
│
├─ src // コンパイル前ソースファイル
│ ├─ img
│ ├─ scss
│ ├─ tasks // gulpfile分割taskファイル
│ └─ index.html
│
├─ dist // コンパイル後ファイル
│ ├─ img
│ ├─ css
│ └─ index.html
これからはじめるGulp（15）：gulp-responsiveプラグインを使ったレスポンシブイメージ作成の自動化
http://whiskers.nukos.kitchen/2014/12/15/gulp-responsive.html
※複雑なので保留
これからはじめるGulp（16）：gulp-image-resizeプラグインを使ってサムネイルやレスポンシブイメージを作る
http://whiskers.nukos.kitchen/2014/12/16/gulp-image-resize.html
※複雑なので保留
：
：
以降、第26回まで 保留
：
これからはじめるGulp（26）：Sketch3のサブディレクトリ書き出しに対応したgulp-sketchを試す
http://whiskers.nukos.kitchen/2014/12/26/gulp-sketch-sub-directory.html
Gulp.js入門 ? コーディングを10倍速くする環境を作る方法まとめ
https://liginc.co.jp/web/tutorial/117900
※gulp-autoprefixerを導入
インストール
cmd… npm i -D gulp-autoprefixer
使ってみる
var gulp = require('gulp');
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');
gulp.task('sass', function() {
gulp.src('src/scss/**/*scss')
.pipe(sass())
.pipe(autoprefixer())
.pipe(gulp.dest('dist/css'));
})
$color: #fff;
body {
background: $color;
border: 1px solid #f00;
transform: all 0.3 ease-in-out;
}
cmd… gulp sass
出力結果
body {
background: #fff;
border: 1px solid #f00;
-webkit-transform: all 0.3 ease-in-out;
transform: all 0.3 ease-in-out; }
gulp シリーズ2 ?gulp-sassでのコンパイル時の整形?
http://qiita.com/ShinyaOkazawa/items/9144dfac166faa0ad4b3
sassオプション expanded を使用
var gulp = require('gulp');
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');
gulp.task('sass', function() {
gulp.src('src/scss/**/*scss')
.pipe(sass())
.pipe(autoprefixer())
.pipe(gulp.dest('dist/css'));
})
$color: #fff;
body {
background: $color;
border: 1px solid #f00;
transform: all 0.3 ease-in-out;
}
cmd… gulp sass
出力結果
body {
background: #fff;
border: 1px solid #f00;
-webkit-transform: all 0.3 ease-in-out;
transform: all 0.3 ease-in-out;
}
sassで@charsetが消える現象について
CSSをSCSS形式で書き直してみた
http://simpleism.net/2013/03/rewrite-in-the-notation-sass/
コンパイルすると
charsetが削除されてファイルタイプで保存される
2バイト文字（日本語）が含まれる場合は逆に付加される
という仕様
sass(scss)をgulpでコンパイルすると、charsetが消えてしまう場合の対処法
http://ichimaruni-design.com/2015/06/sass-charset/
どうしても確実に記述させたい場合は、gulp-headerを使用する方法が可能
var gulp = require('gulp'),
header = require('gulp-header'),
sass = require('gulp-sass'),
autoprefixer = require('gulp-autoprefixer');
var cssCharset = '@charset "utf-8";\n\n'; // gulp-header でcssに挿入するcharset
gulp.task('sass', function() {
gulp.src('src/scss/**/*scss')
.pipe(sass({
outputStyle: 'expanded'
}))
.pipe(autoprefixer())
.pipe(header(cssCharset))
.pipe(gulp.dest('dist/css'));
})
CSSプロパティの記述順について - CSScomb解決編
http://yamanoku.hatenablog.com/entry/2016/05/08/213237
gulp-csscombで任意のプロパティ記述順序を設定する
http://qiita.com/naoyashiga/items/bce4ad2fbc3cbeeff1d1
※gulp-csscombを導入
cmd… npm i -D gulp-csscomb
設定など
[Grunt]CSScombの整形に任意の設定を使う方法
https://increment-log.com/csscomb-setting/
設定参考（grunt）
http://bashalog.c-brains.jp/14/12/01-202258.php
設定ファイルをpackage.jsonと同じルート階層に置く
.csscomb.json※ファイル名の頭にドット[.]が必要なので注意（これに気がつかずに少しハマッた）
ジェネレータ
http://csscomb.com/config
で基本設定、プロパティ順はzen.jsonからコピーしてみる
{
"exclude": [
".git/**",
"node_modules/**",
"bower_components/**"
],
"remove-empty-rulesets": true,
"always-semicolon": true,
"color-case": "lower",
"block-indent": " ",
"color-shorthand": false,
"element-case": "lower",
"eof-newline": true,
"leading-zero": true,
"quotes": "double",
"space-before-colon": "",
"space-after-colon": " ",
"space-before-combinator": " ",
"space-after-combinator": " ",
"space-between-declarations": "\n",
"space-before-opening-brace": " ",
"space-after-opening-brace": "\n",
"space-before-selector-delimiter": "",
"space-before-closing-brace": "\n",
"strip-spaces": true,
"tab-size": true,
"unitless-zero": true,
"vendor-prefix-align": true,
"sort-order": [ [
"position",
"top",
"right",
"bottom",
"left",
"z-index",
"display",
"visibility",
"-webkit-flex-direction",
"-moz-flex-direction",
"-ms-flex-direction",
"-o-flex-direction",
"flex-direction",
"-webkit-flex-order",
"-moz-flex-order",
"-ms-flex-order",
"-o-flex-order",
"flex-order",
"-webkit-flex-pack",
"-moz-flex-pack",
"-ms-flex-pack",
"-o-flex-pack",
"flex-pack",
"float",
"clear",
"-webkit-flex-align",
"-moz-flex-align",
"-ms-flex-align",
"-o-flex-align",
"flex-align",
"-webkit-flex",
"-moz-flex",
"-ms-flex",
"-o-flex",
"flex",
"overflow",
"-ms-overflow-x",
"-ms-overflow-y",
"overflow-x",
"overflow-y",
"-webkit-overflow-scrolling",
"clip",
"-webkit-box-sizing",
"-moz-box-sizing",
"box-sizing",
"margin",
"margin-top",
"margin-right",
"margin-bottom",
"margin-left",
"padding",
"padding-top",
"padding-right",
"padding-bottom",
"padding-left",
"min-width",
"min-height",
"max-width",
"max-height",
"width",
"height",
"outline",
"outline-width",
"outline-style",
"outline-color",
"outline-offset",
"border",
"border-spacing",
"border-collapse",
"border-width",
"border-style",
"border-color",
"border-top",
"border-top-width",
"border-top-style",
"border-top-color",
"border-right",
"border-right-width",
"border-right-style",
"border-right-color",
"border-bottom",
"border-bottom-width",
"border-bottom-style",
"border-bottom-color",
"border-left",
"border-left-width",
"border-left-style",
"border-left-color",
"-webkit-border-radius",
"-moz-border-radius",
"border-radius",
"-webkit-border-top-left-radius",
"-moz-border-radius-topleft",
"border-top-left-radius",
"-webkit-border-top-right-radius",
"-moz-border-radius-topright",
"border-top-right-radius",
"-webkit-border-bottom-right-radius",
"-moz-border-radius-bottomright",
"border-bottom-right-radius",
"-webkit-border-bottom-left-radius",
"-moz-border-radius-bottomleft",
"border-bottom-left-radius",
"-webkit-border-image",
"-moz-border-image",
"-o-border-image",
"border-image",
"-webkit-border-image-source",
"-moz-border-image-source",
"-o-border-image-source",
"border-image-source",
"-webkit-border-image-slice",
"-moz-border-image-slice",
"-o-border-image-slice",
"border-image-slice",
"-webkit-border-image-width",
"-moz-border-image-width",
"-o-border-image-width",
"border-image-width",
"-webkit-border-image-outset",
"-moz-border-image-outset",
"-o-border-image-outset",
"border-image-outset",
"-webkit-border-image-repeat",
"-moz-border-image-repeat",
"-o-border-image-repeat",
"border-image-repeat",
"-webkit-border-top-image",
"-moz-border-top-image",
"-o-border-top-image",
"border-top-image",
"-webkit-border-right-image",
"-moz-border-right-image",
"-o-border-right-image",
"border-right-image",
"-webkit-border-bottom-image",
"-moz-border-bottom-image",
"-o-border-bottom-image",
"border-bottom-image",
"-webkit-border-left-image",
"-moz-border-left-image",
"-o-border-left-image",
"border-left-image",
"-webkit-border-corner-image",
"-moz-border-corner-image",
"-o-border-corner-image",
"border-corner-image",
"-webkit-border-top-left-image",
"-moz-border-top-left-image",
"-o-border-top-left-image",
"border-top-left-image",
"-webkit-border-top-right-image",
"-moz-border-top-right-image",
"-o-border-top-right-image",
"border-top-right-image",
"-webkit-border-bottom-right-image",
"-moz-border-bottom-right-image",
"-o-border-bottom-right-image",
"border-bottom-right-image",
"-webkit-border-bottom-left-image",
"-moz-border-bottom-left-image",
"-o-border-bottom-left-image",
"border-bottom-left-image",
"background",
"filter:progid:DXImageTransform.Microsoft.AlphaImageLoader",
"background-color",
"background-image",
"background-attachment",
"background-position",
"-ms-background-position-x",
"-ms-background-position-y",
"background-position-x",
"background-position-y",
"-webkit-background-clip",
"-moz-background-clip",
"background-clip",
"background-origin",
"-webkit-background-size",
"-moz-background-size",
"-o-background-size",
"background-size",
"background-repeat",
"box-decoration-break",
"-webkit-box-shadow",
"-moz-box-shadow",
"box-shadow",
"color",
"table-layout",
"caption-side",
"empty-cells",
"list-style",
"list-style-position",
"list-style-type",
"list-style-image",
"quotes",
"content",
"counter-increment",
"counter-reset",
"-ms-writing-mode",
"vertical-align",
"text-align",
"-webkit-text-align-last",
"-moz-text-align-last",
"-ms-text-align-last",
"text-align-last",
"text-decoration",
"text-emphasis",
"text-emphasis-position",
"text-emphasis-style",
"text-emphasis-color",
"text-indent",
"-ms-text-justify",
"text-justify",
"text-outline",
"text-transform",
"text-wrap",
"-ms-text-overflow",
"text-overflow",
"text-overflow-ellipsis",
"text-overflow-mode",
"text-shadow",
"white-space",
"word-spacing",
"-ms-word-wrap",
"word-wrap",
"-ms-word-break",
"word-break",
"-moz-tab-size",
"-o-tab-size",
"tab-size",
"-webkit-hyphens",
"-moz-hyphens",
"hyphens",
"letter-spacing",
"font",
"font-weight",
"font-style",
"font-variant",
"font-size-adjust",
"font-stretch",
"font-size",
"font-family",
"src",
"line-height",
"opacity",
"-ms-filter:\\'progid:DXImageTransform.Microsoft.Alpha",
"filter:progid:DXImageTransform.Microsoft.Alpha(Opacity",
"-ms-interpolation-mode",
"-webkit-filter",
"-ms-filter",
"filter",
"resize",
"cursor",
"nav-index",
"nav-up",
"nav-right",
"nav-down",
"nav-left",
"-webkit-transition",
"-moz-transition",
"-ms-transition",
"-o-transition",
"transition",
"-webkit-transition-delay",
"-moz-transition-delay",
"-ms-transition-delay",
"-o-transition-delay",
"transition-delay",
"-webkit-transition-timing-function",
"-moz-transition-timing-function",
"-ms-transition-timing-function",
"-o-transition-timing-function",
"transition-timing-function",
"-webkit-transition-duration",
"-moz-transition-duration",
"-ms-transition-duration",
"-o-transition-duration",
"transition-duration",
"-webkit-transition-property",
"-moz-transition-property",
"-ms-transition-property",
"-o-transition-property",
"transition-property",
"-webkit-transform",
"-moz-transform",
"-ms-transform",
"-o-transform",
"transform",
"-webkit-transform-origin",
"-moz-transform-origin",
"-ms-transform-origin",
"-o-transform-origin",
"transform-origin",
"-webkit-animation",
"-moz-animation",
"-ms-animation",
"-o-animation",
"animation",
"-webkit-animation-name",
"-moz-animation-name",
"-ms-animation-name",
"-o-animation-name",
"animation-name",
"-webkit-animation-duration",
"-moz-animation-duration",
"-ms-animation-duration",
"-o-animation-duration",
"animation-duration",
"-webkit-animation-play-state",
"-moz-animation-play-state",
"-ms-animation-play-state",
"-o-animation-play-state",
"animation-play-state",
"-webkit-animation-timing-function",
"-moz-animation-timing-function",
"-ms-animation-timing-function",
"-o-animation-timing-function",
"animation-timing-function",
"-webkit-animation-delay",
"-moz-animation-delay",
"-ms-animation-delay",
"-o-animation-delay",
"animation-delay",
"-webkit-animation-iteration-count",
"-moz-animation-iteration-count",
"-ms-animation-iteration-count",
"-o-animation-iteration-count",
"animation-iteration-count",
"-webkit-animation-direction",
"-moz-animation-direction",
"-ms-animation-direction",
"-o-animation-direction",
"animation-direction",
"pointer-events",
"unicode-bidi",
"direction",
"-webkit-columns",
"-moz-columns",
"columns",
"-webkit-column-span",
"-moz-column-span",
"column-span",
"-webkit-column-width",
"-moz-column-width",
"column-width",
"-webkit-column-count",
"-moz-column-count",
"column-count",
"-webkit-column-fill",
"-moz-column-fill",
"column-fill",
"-webkit-column-gap",
"-moz-column-gap",
"column-gap",
"-webkit-column-rule",
"-moz-column-rule",
"column-rule",
"-webkit-column-rule-width",
"-moz-column-rule-width",
"column-rule-width",
"-webkit-column-rule-style",
"-moz-column-rule-style",
"column-rule-style",
"-webkit-column-rule-color",
"-moz-column-rule-color",
"column-rule-color",
"break-before",
"break-inside",
"break-after",
"page-break-before",
"page-break-inside",
"page-break-after",
"orphans",
"widows",
"-ms-zoom",
"zoom",
"max-zoom",
"min-zoom",
"user-zoom",
"orientation"
] ]
}
var gulp = require('gulp'),
header = require('gulp-header'),
sass = require('gulp-sass'),
autoprefixer = require('gulp-autoprefixer'),
csscomb = require('gulp-csscomb');
var cssCharset = '@charset "utf-8";\n\n'; // gulp-header でcssに挿入するcharset
gulp.task('sass', function() {
gulp.src('src/scss/**/*scss')
.pipe(sass({outputStyle: 'expanded'}))
//.pipe(autoprefixer())
.pipe(csscomb())
.pipe(header(cssCharset))
.pipe(gulp.dest('dist/css'));
})
scssオプションexpandedを設定（無いと意図しないスペースが入る）
20161128
var gulp = require('gulp'),
header = require('gulp-header'),
sass = require('gulp-sass'),
autoprefixer = require('gulp-autoprefixer'),
csscomb = require('gulp-csscomb');
// config
var cssCharset = '@charset "utf-8";\n\n'; // gulp-header でcssに挿入するcharset
// paths
var paths = {
srcDir: 'src',
dstDir: 'dst',
scssDir: '/scss',
cssDir: '/css',
jsDir: '/js',
scss: '/**/*.+(scss|sass)',
css: '/**/*.css',
js: '/**/*.js',
html: '/**/*.+(html|php)',
img: '/**/*.+(jpg|jpeg|png|gif|svg)'
}
// sass
gulp.task('sass', function() {
gulp.src( paths.srcDir + paths.scssDir + paths.scss )
.pipe(sass({outputStyle: 'expanded'}))
.pipe(autoprefixer())
.pipe(csscomb())
.pipe(header(cssCharset))
.pipe(gulp.dest( paths.dstDir + paths.cssDir ));
});
JSHint入門 - JSHintを使ってJSコードの信頼性を高める
http://qiita.com/yuku_t/items/717d636a174ec37ad967
インストール
cmd… npm i -D gulp-jshint
エラーがナゼか出てしまう症状に…
https://github.com/spalger/gulp-jshint#install
よく調べるとgulp-jshintの他にjshintも一緒にインストールする必要があった
cmd… npm install jshint gulp-jshint --save-dev
Gulp でタスクを並列/直列処理する
http://qiita.com/naoiwata/items/4c82140a5fb5d7bdb3f8
https://www.npmjs.com/package/run-sequence
インストール
cmd… npm i -D run-sequence
gulpでビルド時にフォルダを削除する
http://anton0825.hatenablog.com/entry/2015/06/23/000000
インストール
cmd… npm i -D rimraf
今後やりたいこと
・スタイルガイド（FrontNote候補）
・htmlインクルード
gulpfile.js メモ
var gulp = require('gulp'),
runSequence = require('run-sequence'),
browserSync = require('browser-sync');
plumber = require('gulp-plumber'),
notify = require('gulp-notify'),
rimraf = require('rimraf'),
header = require('gulp-header'),
sass = require('gulp-sass'),
autoprefixer = require('gulp-autoprefixer'),
csscomb = require('gulp-csscomb')
imagemin = require('gulp-imagemin');
jshint = require('gulp-jshint');
var cssCharset = '@charset "utf-8";\n\n'; // gulp-header でcssに挿入するcharset
gulp.task('image', function() {
return gulp.src('./src/img/**/*')
.pipe(imagemin())
.pipe(gulp.dest('./dst/img'));
});
gulp.task('sass', function() {
return gulp.src('./src/scss/**/*.scss')
.pipe(sass({outputStyle: 'expanded'}))
.pipe(autoprefixer())
.pipe(header(cssCharset))
.pipe(gulp.dest('./dst/css'))
});
gulp.task('html', function() {
return gulp.src('./src/**/*.html', {base: './src'})
.pipe(gulp.dest('dst'))
});
gulp.task('js', function() {
return gulp.src('./src/js/**/*.js')
//.pipe(jshint())
//.pipe(jshint.reporter('jshint warnning'))
.pipe(gulp.dest('./dst/js'))
});
gulp.task('clean', function(callback) {
rimraf('./dst', callback);
});
gulp.task('watch', function(){
browserSync.init({
notify: false,
server:{
baseDir: './dst',
index : 'index.html'
}
});
gulp.watch(['./src/scss/**/*.scss'], ['sass']);
gulp.watch(['./src/**/*.html'], ['html']);
gulp.watch(['./src/js/**/*.js'], ['js']);
gulp.watch(['./src/img/**/*'], ['image']);
gulp.watch(['./dst/css/**/*.css'], browserSync.reload);
gulp.watch(['./dst/**/*.html'], browserSync.reload);
gulp.watch(['./dst/js/**/*.js'], browserSync.reload);
gulp.watch(['./dst/img/**/*'], browserSync.reload);
});
gulp.task('build', function(callback) {
runSequence('clean', 'sass', ['js', 'html', 'image'], callback);
});
gulp.task('default', ['watch']);
20161208
今後sjis対応が必要になりそうなのでメモ
gulpで処理結果をShift_JISに変換して出力する
https://www.anothersky.pw/2015/02/gulp_convert_encoding.html
gulp-convert-encodingで文字コードを指定
http://qiita.com/n_kats_/items/05140dfabcf2502782f9
gulp で shift_jis 環境を管理する
http://qiita.com/yokoh9/items/c72cb575ae29749ff2bd