有人可以查看我的 gulpfile.js 吗？

Question

对于任何试图缩小 HTML 和 gulp-sass 和浏览器同步的人来说，下面是我的固定 gulpfile.js

我希望它对某人有所帮助，因为对于像我这样的新人来说，吞咽可能会很困难。

   'use strict';

var gulp = require('gulp');
var minifyHTML = require('gulp-minify-html');
var sass = require('gulp-sass');
var browsersync = require('browser-sync');

// BrowserSync proxy
    gulp.task('browser-sync', function() {
    browsersync({
        proxy: "localhost:8888"
    });
});
// BrowserSync reload all Browsers
gulp.task('browsersync-reload', function () {
    browsersync.reload();

});

gulp.task('minify-html', function() {
  return gulp.src('src/*.html')
    .pipe(minifyHTML({ empty: true }))
    .pipe(gulp.dest('dist'))
    .pipe(browsersync.reload({ stream:true }));
});

gulp.task('sass', function () {
  gulp.src('./src/sass/**/*.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest('./dist/css'))
    .pipe(browsersync.reload({ stream:true }));
});

// watch task
gulp.task('watch', ['browser-sync'], function () {
  gulp.watch('./src/**/*.html', ['minify-html']);
  gulp.watch('./src/sass/**/*.scss', ['sass']);
});

gulp.task('default', [ 'minify-html', 'sass', 'watch']);

Answer 1

这是我重构您的 gulpfile 的快速尝试。我所做的只是删除了一些重复的代码并以更合乎逻辑的方式拆分任务。我建议的主要事情是确保每个任务都有一个目的，并使用 gulp 依赖系统根据需要组合它们。

为了将来的参考，我会问Code Review StackExchange，因为他们更有可能帮助重构和代码审查。

抱歉有任何错误，因为我没有要测试的环境。

// include gulp
var gulp = require('gulp'); 

// include plug-ins
var minifyHTML = require('gulp-minify-html');
var minifyCSS = require('gulp-minify-css');
var changed = require('gulp-changed');
var concat = require('gulp-concat');
var browserSync = require('browser-sync').create();

var paths = {
  html: { src: './src/*.html', dest: './' },
  css: { src: 'src/css/*.css', dest: 'css' },
};

// minify new or changed HTML pages
gulp.task('html:build', function() {
  gulp.src(paths.html.src)
    .pipe(changed(htmlDst))
    .pipe(minifyHTML())
    .pipe(gulp.dest(paths.html.dest));
});

// CSS concat, auto-prefix and minify
gulp.task('css:build', function() {
  gulp.src(paths.css.src)
    .pipe(concat('styles.css'))
    .pipe(minifyCSS())
    .pipe(gulp.dest(paths.html.dest));
});

gulp.task('html:watch', function() {
  gulp.watch(paths.html.src, ['html:build']);
});

gulp.task('css:watch', function() {
  gulp.watch(paths.css.src, ['css:build']);
});

gulp.task('serve', function() {  
  browserSync.init({
      server: "./"
  });

  gulp.watch(["css/*.css", "*.html"]).on('change', browserSync.reload);
});

// default gulp tasks
gulp.task('build', ['html:build', 'css:build']);
gulp.task('watch', ['html:watch', 'css:watch']);
gulp.task('default', ['build', 'watch', 'serve']);