どうやりゃ良いんですか?って聞かれたので。確かにまとまってるところが無いっぽい。
よくやるパターンだと思うけどなぁーーーと思ったので貼り付ける。
npm i gulp@3.9.1 gulp-plumber gulp-sass gulp-uglify gulp-clean-css gulp-rename browser-sync --save-dev
var conf = {
port: 8080,
uiPort: 8081
};
var gulp = require('gulp');
var plumber = require('gulp-plumber');
var sass = require('gulp-sass');
var uglify = require('gulp-uglify');
var cleanCSS = require('gulp-clean-css');
var rename = require('gulp-rename');
var browserSync = require('browser-sync').create();
gulp.task('uglify', () => {
gulp.src([ 'js/**/*.js', '!js/**/*.min.js' ])
.pipe(uglify())
.pipe(rename({ extname: '.min.js' }))
.pipe(gulp.dest('js/'));
});
gulp.task('cleanCSS',() => {
gulp.src([ 'css/**/*.css', '!css/**/*.min.css' ])
.pipe(cleanCSS())
.pipe(rename({ extname: '.min.js' }))
.pipe(gulp.dest('css/'));
});
gulp.task('minify', [ 'uglify', 'cleanCSS' ]);
gulp.task('browserSync', () => {
browserSync.init({
port: conf.port,
ui: { port: conf.uiPort },
server: './'
});
});
gulp.task('watch-html', [ 'browserSync' ], () => {
gulp.watch([ '**/*.html' ], () => {
gulp.src('**/*.html')
.pipe(browserSync.reload({ stream: true }));
});
});
gulp.task('watch-js', [ 'browserSync' ], () => {
gulp.watch([ 'js/**/*.js' ], () => {
gulp.src('js/**/*.js')
.pipe(browserSync.reload({ stream: true }));
});
});
gulp.task('watch-sass', [ 'browserSync' ], () => {
gulp.watch([ 'sass/**/*.sass' ], () => {
gulp.src('sass/**/*.sass')
.pipe(plumber())
.pipe(sass({ outputStyle: 'expanded' }))
.pipe(gulp.dest('./css/'))
.pipe(browserSync.reload({ stream: true }));
});
});
gulp.task('watch-scss', [ 'browserSync' ], () => {
gulp.watch([ 'sass/**/*.scss' ], () => {
gulp.src('sass/**/*.scss')
.pipe(plumber())
.pipe(sass({ outputStyle: 'expanded' }))
.pipe(gulp.dest('./css/'))
.pipe(browserSync.reload({ stream: true }));
});
});
gulp.task('watch', [ 'watch-html', 'watch-js', 'watch-sass', 'watch-scss' ]);
gulp.task('default', [ 'watch' ]);
gulp
で、ポート 8080 で browserSync のサーバが Listen。
index.html
js/*.js
sass/*.sass
sass/*.scss
こんなディレクトリ構造の HTML、JS、Sass のファイルを弄るとブラウザをリロード。
Sass のファイルは css/ に .css として作成される。
それぞれディレクトリは深さ問わず。
全部監視させるとリロードが遅くなる場合、監視対象を絞れば良し。JS だけ監視するなら
gulp watch-js
HTML と Sass だけなら
gulp watch-html watch-sass
gulp minify
とやりゃ、js/、css/ 内に min が作成される。
後はノリとグルーヴ感を大切にすれば OK。