Gulp with browserify, sass 和 watch 这两个文件

Question

我有问题。我创建了自己的 gulpfile，一切正常，但我想添加一个 browserify 来使用模块，但我想看这个。你能这么好，看看我的 gulpfile 并说我是否可以在服务任务中添加某个地方来观看浏览器化？或者也许你有更好的解决这个问题的方法？

var gulp = require('gulp');
var browserSync = require('browser-sync');
var sass = require('gulp-sass');
var sourcemaps = require('gulp-sourcemaps');
var autoprefixer = require('gulp-autoprefixer');
var cleanCSS = require('gulp-clean-css');
var uglify = require('gulp-uglify');
var htmlReplace = require('gulp-html-replace');
var htmlMin = require('gulp-htmlmin');

var config = {
  dist:'dist/',
  src:'src/',
  htmlIn:'src/*.html',
  cssIn:'src/css/**/*.css',
  jsIn:'src/script/**/*.js',
  scssIn:'src/scss/**/*.scss',
  cssOut:'dist/css',
  jsOut:'dist/script',
  scssOut:'src/css',

}

gulp.task('reload',function(){
  browserSync.reload();
});



gulp.task('serve', ['sass','scripts'], function(){

  browserSync({
    server:config.src,
    port:5050
  });

  gulp.watch([config.htmlIn, config.jsIn], ['reload']);
  gulp.watch(config.scssIn, ['sass']);
})

gulp.task('sass', function(){
  return gulp.src(config.scssIn)
  .pipe(sourcemaps.init())
  .pipe(sass().on('error', sass.logError))
  .pipe(autoprefixer({
    browsers:['last 3 versions']
  }))
  .pipe(sourcemaps.write())
  .pipe(gulp.dest('src/css'))
  .pipe(browserSync.stream());
})

gulp.task('mincss',function(){
  return gulp.src(config.cssIn)
  .pipe(cleanCSS())
  .pipe(gulp.dest(config.cssOut))
})

gulp.task('minjs',function(){
  return gulp.src(config.jsIn)
  .pipe(uglify())
  .pipe(gulp.dest(config.jsOut));
})


gulp.task('default', ['serve']);

Answer 1

为您的 browserify 添加另一个 gulp watch。

gulp.watch(config.jsIn, ['browserify']);