6
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

gulp + browser-syncを使って自動で納品ファイルを生成したい

Last updated at Posted at 2015-11-12
  1. ソースフォルダ内のファイルを編集
  2. sassのコンパイルやHTML/JSのコード圧縮しつつ、ブラウザシンク&リロード
  3. 階層構造を維持したまま納品用ディレクトリに生成
  4. 随時ブラウザで確認しつつ、オッケーならディレクトリごと納品

ってな事をしたくて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圧縮しとらんやないかいっ!

があります・・・。(;´Д`)

6
6
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?