监听sass、html变化热更新，gulp4配置

用习惯了Vue的脚手架，有时候脱离框架开发的时候确实不习惯，连基本的自动编译和热更新都没，手动刷新查看变化太不爽了。
今天又把以前用过的gulp捡起来，结果因为node已经是14+了，gulp3的写法过时了，运行不起来。重新学习gulp4，记录下。

这个配置是没有用到打包功能的，只是监测本地文件变更，再编译scss为css，最后热更新。

package.json，其实用不了那么多，真正使用的依赖没几个，可以自行筛选

"devDependencies": {
    "chai": "^4.1.1",
    "del": "^2.2.2",
    "express-mockjs": "^0.4.9",
    "gulp": "^4.0.2",
    "gulp-autoprefixer": "^2.2.0",
    "gulp-cache": "^1.1.3",
    "gulp-clean-css": "^3.0.0",
    "gulp-compass": "^2.1.0",
    "gulp-concat": "^2.6.0 ",
    "gulp-header": "^1.8.8",
    "gulp-htmlmin": "^3.0.0",
    "gulp-if": "^2.0.1",
    "gulp-livereload": "^4.0.2",
    "gulp-minify-css": "^1.2.4",
    "gulp-notify": "^2.2.0",
    "gulp-plumber": "^1.2.1",
    "gulp-rename": "^1.2.2",
    "gulp-replace": "^0.6.1",
    "gulp-ruby-sass": "^1.0.5",
    "gulp-uglify": "^1.5.4",
    "gulp-webserver": "^0.9.1",
    "minimist": "^1.2.0",
    "mocha": "^3.2.0",
    "sinon": "^3.2.1",
    "sinon-chai": "^2.13.0"
  },
  "dependencies": {
    "browser-sync": "^2.27.7",
    "gulp-connect": "^5.7.0",
    "gulp-livereload": "^4.0.2",
    "gulp-sass": "^5.1.0",
    "gulp-watch": "^5.0.1",
    "node-sass": "^7.0.1"
  }
}

gulpfile.js：

var pkg = require('./package.json');
var inds = pkg.independents;

var gulp = require('gulp');

var plumber = require('gulp-plumber');
var compass = require('gulp-compass');
var sass = require('gulp-sass')(require('node-sass'));
var autoprefixer = require('gulp-autoprefixer');
const browserSync = require("browser-sync").create(), //自动刷新
    reload = browserSync.reload;
var watch = require('gulp-watch');//监视
var connect=require('gulp-connect');//引入gulp-connect模块 浏览器刷新
var uglify = require('gulp-uglify');
var minifyCss = require('gulp-minify-css');
var concat = require('gulp-concat');
var rename = require('gulp-rename');
var notify = require('gulp-notify');
var cache = require('gulp-cache');
var livereload = require('gulp-livereload');
var webserver = require('gulp-webserver');
var replace = require('gulp-replace');

var header = require('gulp-header');
var del = require('del');
var gulpif = require('gulp-if');
var minimist = require('minimist');



gulp.task('html', function(){//编译html
  return gulp.src('src/views/**/*.html')
  //.pipe(gulp.dest('app/dist'))
      .pipe(connect.reload());
})

gulp.task('css', function(){//编译scss
  return gulp.src('src/sass/**/*.scss')

      //.pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))//编译scss

      //使用gulp-compass，必须本机安装compass: npm install gulp-compass --save-dev
      .pipe(plumber({
          errorHandler: function (error) {
              console.log(error.message);
              this.emit('end');
          }}))
      .pipe(compass({
          //config_file: './config.rb',
          //project: path.join(__dirname, 'assets'),
          css: 'src/style',
          sass: 'src/sass',
          image: 'src/style/images',
          style: 'compressed'
      }))
      .on('error', function(error) {
          // Would like to catch the error here
      })
      .pipe(minifyCss())
      .pipe(gulp.dest('src/style')) //当前对应css文件
      .pipe(connect.reload());//更新
})

gulp.task('connect:src', async function(){
  gulp.src('/')
      .pipe(webserver({
        host:'localhost', //根域名
        path:'/', //默认localhost:8080
        livereload: true, //自动更新
        open: 'start/index.html' ,
        port: 9998 //端口
      }))
})

gulp.task('watchs',function(){//监听变化执行任务
  //当匹配任务变化才执行相应任务
  gulp.watch(['src/views/**/*.html', 'start/views/**/*.html'], gulp.series('html'));
  gulp.watch('src/sass/**/*.scss', gulp.series('css'));
  gulp.watch('src/style/**/*.css');
})

//启动任务connect:dist服务，生成打包文件后，监控其变化
gulp.task('serve',gulp.series('connect:src', 'watchs'));

配置完后，使用命令启动热服务

gulp serve

创建sass变量文件，然后@import到其他scss文件。

@import "compass/css3", "compass/support", "compass/utilities";