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']))
})
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容