web制作に便利なgulpfile.js

gulpfile.js

var gulp = require('gulp');	//gulp本体
var imagemin = require('gulp-imagemin');	//画像軽量化
var imagemin_png = require('imagemin-pngquant');	//画像軽量化
var plumber = require('gulp-plumber');	//watch対応
var webserver = require('gulp-webserver');	//live reload
var sass = require('gulp-ruby-sass');		//scss -> css

//htmlをコピー
gulp.task('html', function() {
    gulp.src('./src/*.html')
        .pipe( gulp.dest('./dist') );
});

//jpgを軽量化してコピー
gulp.task('img_jpg', function() {
    gulp.src('./src/img/*.jpg')
        .pipe(imagemin())
        .pipe(gulp.dest('./dist/img'));
});

//pngを軽量化してコピー
gulp.task('img_png', function() {
    gulp.src('./src/img/*.png')
        .pipe(imagemin({quality: '60-80', speed: 1}))
        .pipe(gulp.dest('./dist/img'));
});

//jsファイルをコピー
gulp.task('js', function() {
    gulp.src('./src/js/*.js')
        .pipe( gulp.dest('./dist/js') );
});

//scss -> css 変換
gulp.task('sass', function() {
	return sass('./src/css/*.scss', {style: 'compressed'})	//compressed / expanded
  .pipe(gulp.dest('./dist/css'));
});

//ファイルを監視
gulp.task('watch', function() {
    gulp.watch('./src/img/*.jpg', ['img_jpg']);
    gulp.watch('./src/img/*.png', ['img_png']);
    gulp.watch('./src/*.html', ['html']);
    gulp.watch('./src/css/*.scss', ['sass']);
});

//webサーバーを表示
gulp.task('webserver', function() {
    gulp.src('./dist')
        .pipe(
            webserver({
                host: '127.0.0.1',
                livereload: true
            })
        );
});

gulp.task('default', ['html', 'img_jpg', 'img_png', 'js', 'watch', 'webserver', 'sass']);