今回は作業フォルダと出力フォルダを分けて
ブラウザ自動更新など便利なgulpプラグインをいれてみましょう。
自分用にメモった物なので詳しくは下記サイトをご覧ください。
- gulp-sassのコンパイル後のcssをいつもの見た目にしたい
- [htmlコーディング] gulpを利用してコーディング時に（複数）ブラウザをオートリロードする
- vendor prefix, minify, 開発/本番用ビルドの切り替え... CSSのあれこれをGulpにさせてみた
- gulp.jsで便利なタスクを作ってみよう【デバッグ編】
- gulp.jsで便利なタスクを作ってみよう【エラーと通知編】
「ベンダープレフィックスを自動付与」
1．まずはSassからCSSにコンパイルした時にベンダープレフィックスを自動で付与させてみよう(｀･ω･´)
----------------------------------------------------
＞ベンダープレフィックスを自動付与
----------------------------------------------------
【1】下記コマンドプロントを入力
前回作ったpackage.jsonファイルが置いてあるディレクトリ(sampleフォルダ)に
コマンドプロンプトの階層を移動し
下記コマンドを入力しましょう。
(コマンド入力)
npm install gulp-autoprefixer --save-dev
【2】gulpfile.jsにタスクを追記
var autoprefixer = require("gulp-autoprefixer");
と
.pipe(autoprefixer({browsers: ['last 4 version', 'ie >= 6', 'Android 4.0']}))
を追記
※一通りのブラウザに対応させる記述です。
(追記後)
var gulp = require("gulp");
var sass = require("gulp-sass");
var autoprefixer = require("gulp-autoprefixer");
gulp.task("sass", function() {
gulp.src("sass/**/*scss")
.pipe(sass())
.pipe(autoprefixer({browsers: ['last 4 version', 'ie >= 6', 'Android 4.0']}))
.pipe(gulp.dest("./css"));
});
【3】style.scssに以下を記述（動作確認）
h1 {
color: red;
transition: 200ms ease-out transform;
&:hover {
color: blue;
transform: translate(10px,0);
}
}
【4】動作確認
コマンドプロントに下記を入力
(コマンド入力)
gulp sass
style.cssに下記が書き出されていればOK
h1 {
color: red;
-webkit-transition: 200ms ease-out transform;
transition: 200ms ease-out transform; }
h1:hover {
color: blue;
-webkit-transform: translate(10px, 0);
transform: translate(10px, 0); }
※ベンダープレフィックスをつけてくれない場合もあるので
IEなどのブラウザで確認して反映されていなければ自分でつけましょうｗ
【おまけ】
コンパイルされたCSSの見た目を整えよう。
gulpfile.jsに下記タスクを追記
.pipe(sass({outputStyle: 'expanded'}))
(追記後)
var gulp = require("gulp");
var sass = require("gulp-sass");
var autoprefixer = require("gulp-autoprefixer");
gulp.task("sass", function() {
gulp.src("sass/**/*scss")
.pipe(sass())
.pipe(sass({outputStyle: 'expanded'}))
.pipe(autoprefixer())
.pipe(gulp.dest("./css"));
});
コマンドプロントに下記を入力
(コマンド入力)
gulp sass
style.cssが下記に変更されていればOK
h1 {
color: red;
-webkit-transition: 200ms ease-out transform;
transition: 200ms ease-out transform;
}
h1:hover {
color: blue;
-webkit-transform: translate(10px, 0);
transform: translate(10px, 0);
}
2．続いて作業ファイルと出力ファイルを分けよう
作業するファイルとgulpで出力されるファイルを別で管理するために
ディレクトリ構成を変更していきます。
----------------------------------------------------
＞作業フォルダを作成
----------------------------------------------------
【1】sampleフォルダ内にgulpフォルダを作ります。
【2】gulpフォルダ内にsassフォルダを移動します。
【3】続いてhtmlファイルとjsフォルダ、imgフォルダを作ります。
gulpフォルダ内は以下のようになりました。
※HTMLファイルにはCSSやJSのリンクの設定を忘れずに！
(HTMLソース)
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/style.css">
<title>テスト</title>
</head>
<body>
<p>自動更新テスト</p>
</body>
</html>
【4】gulpfile.jsのタスクを修正
（変更前）
gulp.src("sass/**/*scss")
（変更後）
gulp.src("gulp/sass/**/*scss")
----------------------------------------------------
＞出力フォルダを作成
----------------------------------------------------
【1】sampleフォルダ内にhtmlフォルダを作ります。
【2】sampleフォルダ内のcssフォルダを削除します。
【3】gulpfile.jsのタスクを修正
（変更前）
.pipe(gulp.dest("./css"));
（変更後）
.pipe(gulp.dest("./html/css"));
変更後の全体は下記のようになります。
var gulp = require("gulp");
var sass = require("gulp-sass");
var autoprefixer = require("gulp-autoprefixer");
gulp.task("sass", function() {
gulp.src("gulp/sass/**/*scss")
.pipe(sass())
.pipe(sass({outputStyle: 'expanded'}))
.pipe(autoprefixer())
.pipe(gulp.dest("./html/css"));
});
【4】動作確認
コマンドプロントに下記を入力
(コマンド入力)
gulp sass
htmlフォルダにcssディレクトリとstyle.cssが生成されていばOK
3．続いて作業フォルダ（gulpフォルダ）内のファイルを変更した時にブラウザを同期し自動で更新できるようにしてみましょう。
----------------------------------------------------
＞自動更新
----------------------------------------------------
【1】下記コマンドプロントを入力
(コマンド入力)
npm install browser-sync --save-dev※コマンドプロンプトの階層がsampleになっているを前提としています。 【2】gulpfile.jsにタスクを追記
var browserSync = require("browser-sync");
と
.pipe(browserSync.stream());
と
gulp.task('default', function() {
browserSync.init({
server: {
baseDir: "./html"
},
// external 指定すると、実行時のアクセスURLがIPアドレス指定側で開くことができる
open: 'external',
});
gulp.watch(['gulp/sass/**/*.scss'],["sass"]);
});
を追記
(追記後)
var gulp = require("gulp");
var sass = require("gulp-sass");
var autoprefixer = require("gulp-autoprefixer");
var browserSync = require("browser-sync");
gulp.task("sass", function() {
gulp.src("gulp/sass/**/*scss")
.pipe(sass())
.pipe(sass({outputStyle: 'expanded'}))
.pipe(autoprefixer())
.pipe(gulp.dest("./html/css"))
.pipe(browserSync.stream());
});
gulp.task('default', function() {
browserSync.init({
server: {
baseDir: "./html"
},
// external 指定すると、実行時のアクセスURLがIPアドレス指定側で開くことができる
open: 'external',
});
gulp.watch(['gulp/sass/**/*.scss'],["sass"]);
});
【3】動作確認
コマンドプロントに下記を入力
(コマンド入力)
gulp
上記コマンドを入力後に自動でブラウザが立ち上がればOK。
【4】作業ファイルの修正が自動でブラウザに反映されているか確認
gulpfile.jsに下記タスクを追記
//html
gulp.task("html", function () {
gulp.src("gulp/**/*.html")
.pipe(gulp.dest("html/"))
.pipe(browserSync.stream())
});
//js
gulp.task("js", function () {
gulp.src("gulp/js/**/*.js")
.pipe(gulp.dest("html/js/"))
.pipe(browserSync.stream())
});
gulp.watch(['gulp/**/*.html'],["html"]);
gulp.watch(['gulp/**/*.js'],["js"]);
(追記後)
var gulp = require("gulp");
var sass = require("gulp-sass");
var autoprefixer = require("gulp-autoprefixer");
var browserSync = require("browser-sync");
gulp.task("sass", function() {
gulp.src("gulp/sass/**/*scss")
.pipe(sass())
.pipe(sass({outputStyle: 'expanded'}))
.pipe(autoprefixer())
.pipe(gulp.dest("./html/css"))
.pipe(browserSync.stream());
});
//html
gulp.task("html", function () {
gulp.src("gulp/**/*.html")
.pipe(gulp.dest("html/"))
.pipe(browserSync.stream())
});
//js
gulp.task("js", function () {
gulp.src("gulp/js/**/*.js")
.pipe(gulp.dest("html/js/"))
.pipe(browserSync.stream())
});
gulp.task('default', function() {
browserSync.init({
server: {
baseDir: "./html"
},
// external 指定すると、実行時のアクセスURLがIPアドレス指定側で開くことができる
open: 'external',
});
gulp.watch(['gulp/sass/**/*.scss'],["sass"]);
gulp.watch(['gulp/**/*.html'],["html"]);
gulp.watch(['gulp/**/*.js'],["js"]);
});
コマンドプロンプトでctrl + cを押してyで終了し、
再度gulpを入力しましょう。
gulpフォルダ内のsassファイルやhtmlファイルを修正保存して
ブラウザに自動で反映されればOK。
これで作業フォルダ内にファイルを追加したり修正すれば
自動で更新しブラウザに反映してくれるようになりました。
※自動更新が効かなかったりした場合はコマンドプロンプトを終了し
再度gulpを入力し動かしてみましょう。
次回は「gulpで画像圧縮してみた（Windows）」です。
ブログ王ランキングに参加中！
