gulp简单应用

Gulp中文网：
https://v3.gulpjs.com.cn/docs/

我的项目地址：
https://cxetry.coding.net/public/gulp/gulp-lite/git/files

• gulp-load-plugins

可加载所有gulp-开头的插件

var $ = require('gulp-load-plugins')()
//编译less
gulp.task('less', function () {
  return gulp
    .src(['app/less/*.less']) //指定 less文件
    .pipe($.less()) //把less编译成css
    .pipe(gulp.dest('app/css')) //输出到目的地
})

• browser-sync

浏览器热更新

var browserSync = require('browser-sync').create()
gulp.task('browserSync', function () {
  browserSync.init({
    files: ['app/**/*.*'],
    server: {
      baseDir: 'app',
      index: 'index.html', // 指定默认打开的文件
    },
  })
})

• Watchers

browser-sync会监测app目录下文件变化，所以这个不用也可以

gulp.task('watch', function () {
  gulp.watch('app/less/**/*.less', gulp.series(['less']))
  gulp.watch('app/*.html', gulp.series(['html']))
  gulp.watch('app/js/**/*.js', gulp.series(['js']))
  gulp.watch('app/images/**/*.*', gulp.series(['images']))
})