- ソースフォルダ内のファイルを編集
- sassのコンパイルやHTML/JSのコード圧縮しつつ、ブラウザシンク&リロード
- 階層構造を維持したまま納品用ディレクトリに生成
- 随時ブラウザで確認しつつ、オッケーならディレクトリごと納品
ってな事をしたくてgulpを使ってみました。
gulpfile.js
//プラグインの読み込み
var gulp = require("gulp");
var imageMin = require("gulp-imagemin");
var htmlMin = require("gulp-htmlmin")
var sass = require("gulp-sass");
var minifyCss = require('gulp-minify-css');
var uglify = require('gulp-uglify');
var browserSync = require('browser-sync').create();
// ブラウザ同期
gulp.task('browser-sync', function() {
browserSync.init({
server: {
baseDir: "./dest"
},
open: false//これがないとOSによっては、エラーで止まる場合がある
});
// 監視対象のファイルを指定
gulp.watch('./dest/**/*.html', browserSync.reload);
gulp.watch('./dest/**/*.css', browserSync.reload);
gulp.watch('./dest/**/*.js', browserSync.reload);
});
//scss
gulp.task('scss', function () {
gulp.src(["./src/**/*.scss"], { base: 'src' })
.pipe(sass())
.pipe(gulp.dest('./dest'));
});
// jsの圧縮
gulp.task('js', function () {
gulp.src(["./src/**/*.js"], { base: 'src' })
.pipe(uglify({preserveComments: 'some'}))
.pipe(gulp.dest('./dest'));
});
// htmlの圧縮
gulp.task('html', function () {
gulp.src(["./src/**/*.html"], { base: 'src' })
.pipe(htmlMin({collapseWhitespace: true}))
.pipe(gulp.dest('./dest'));
});
// 毎回実行して欲しい処理
gulp.task('watch',function(){
gulp.watch([
"./src/**/*.jpg" ,
"./src/**/*.png" ,
"./src/**/*.gif"
], ['img']);
gulp.watch('./src/**/*.html', ['html']);
gulp.watch('./src/**/*.scss', ['scss']);
gulp.watch('./src/**/*.js', ['js']);
});
gulp.task("default",["browser-sync","watch"]);
一応望み通りの挙動はしているものの、課題としては
- 画像圧縮のタイミングはここで良いのか
- 処理の流れが煩雑じゃないか
- CSS圧縮しとらんやないかいっ!
があります・・・。(;´Д`)