0
LiveReload가 변경 사항을 감시하지 않으며 따라서 페이지를 자동으로 다시로드하지 않는다는 점을 제외하면 모든 것이 잘 작동합니다.빌드 폴더의 Gulp livereload
내가 뭘 잘못하고 있니?
// Gulp.js configuration
var
\t // modules
\t gulp = require('gulp'),
\t newer = require('gulp-newer'),
\t imagemin = require('gulp-imagemin'),
\t pug = require('gulp-pug'),
\t htmlclean = require('gulp-htmlclean'),
\t concat = require('gulp-concat'),
\t deporder = require('gulp-deporder'),
\t stripdebug = require('gulp-strip-debug'),
\t uglify = require('gulp-uglify'),
\t sass = require('gulp-sass'),
\t postcss = require('gulp-postcss'),
\t assets = require('postcss-assets'),
\t autoprefixer = require('autoprefixer'),
\t mqpacker = require('css-mqpacker'),
\t cssnano = require('cssnano'),
\t browserSync = require('browser-sync').create(),
\t // development mode?
\t devBuild = (process.env.NODE_ENV !== 'production'),
\t // folders
\t folder = {
\t \t src: 'src/',
\t \t build: 'build/'
\t };
// image processing
gulp.task('images', function() {
\t var out = folder.build + 'images/';
\t return gulp.src(folder.src + 'images/**/*')
\t \t .pipe(newer(out))
\t \t .pipe(imagemin({
\t \t \t optimizationLevel: 5
\t \t }))
\t \t .pipe(gulp.dest(out));
});
// Pug processing
gulp.task('pug', function buildHTML() {
\t var out = folder.build
\t return gulp.src(folder.src + 'views/*.pug')
\t \t .pipe(pug({
\t \t \t pretty: true
\t \t }))
\t \t .pipe(gulp.dest(out))
});
// HTML processing
gulp.task('html', ['images'], function() {
\t var
\t \t out = folder.build + 'html/',
\t \t page = gulp.src(folder.src + 'html/**/*')
\t \t .pipe(newer(out));
\t // minify production code
\t if (!devBuild) {
\t \t page = page.pipe(htmlclean());
\t }
\t return page.pipe(gulp.dest(out));
});
// JavaScript processing
gulp.task('js', function() {
\t var jsbuild = gulp.src(folder.src + 'js/**/*')
\t \t .pipe(deporder())
\t \t .pipe(concat('main.js'));
\t if (!devBuild) {
\t \t jsbuild = jsbuild
\t \t \t .pipe(stripdebug())
\t \t \t .pipe(uglify());
\t }
\t return jsbuild.pipe(gulp.dest(folder.build + 'js/'));
});
// CSS processing
gulp.task('css', ['images'], function() {
\t var postCssOpts = [
\t \t assets({
\t \t \t loadPaths: ['images/']
\t \t }),
\t \t autoprefixer({
\t \t \t browsers: ['last 2 versions', '> 2%']
\t \t }),
\t \t mqpacker
\t ];
\t if (!devBuild) {
\t \t postCssOpts.push(cssnano);
\t }
\t return gulp.src(folder.src + 'scss/styles.scss')
\t \t .pipe(sass({
\t \t \t outputStyle: 'nested',
\t \t \t imagePath: 'images/',
\t \t \t precision: 3,
\t \t \t errLogToConsole: true
\t \t }))
\t \t .pipe(postcss(postCssOpts))
\t \t .pipe(gulp.dest(folder.build + 'css/'));
});
gulp.task('browserSync', function() {
\t browserSync.init({
\t \t server: {
\t \t \t baseDir: folder.build
\t \t },
\t \t port: 3000
\t });
});
// run all tasks
gulp.task('run', ['pug', 'html', 'css', 'js']);
// watch for changes
gulp.task('watch', ['browserSync'], function() {
\t // image changes
\t gulp.watch(folder.src + 'images/**/*', ['images']);
\t // pug changes
\t gulp.watch(folder.src + 'views/**/*', ['pug'], browserSync.reload);
\t // html changes
\t gulp.watch(folder.src + 'html/**/*', ['html'], browserSync.reload);
\t // javascript changes
\t gulp.watch(folder.src + 'js/**/*', ['js'], browserSync.reload);
\t // css changes
\t gulp.watch(folder.src + 'scss/**/*', ['css'], browserSync.reload);
});
// default task
gulp.task('default', ['run', 'watch']);