npm install --save-dev gulp

var gulp = require('gulp'),
  less = require('gulp-less'),          //less 转 css
  csso = require('gulp-csso'),          //css压缩
  concat = require('gulp-concat'),        //合并文件
  uglify = require('gulp-uglify'),        //js 压缩
  jshint = require('gulp-jshint'),        //js 检查
  clean = require('gulp-clean'),         //清除文件
  imagemin = require('gulp-imagemin'),      //图片压缩
  rev = require('gulp-rev'),           //添加版本号
  revReplace = require('gulp-rev-replace'),   //版本号替换
  useref = require('gulp-useref'),        //解析html资源定位
  gulpif = require('gulp-if'),          //if语句
  connect = require('gulp-connect');       //创建web服务器

gulp.task('dist:img', () => {
  gulp.src(['./src/**/*.jpg', './src/**/*.png'])
  .pipe(imagemin())
  .pipe(gulp.dest('dist/'))
})

gulp.task('dist:css', () => {
  gulp.src('dist/css/*.css').pipe(clean());
  return gulp.src('./src/less/*.less')
  .pipe(less())
  .pipe(csso())
  .pipe(concat('public.css'))
  .pipe(gulp.dest('dist/css/'));
});

gulp.task('dist:js', () => {
  gulp.src('dist/js/*.js').pipe(clean());
  return gulp.src('./src/js/*.js')
  .pipe(jshint())
  .pipe(jshint.reporter('default'))
  .pipe(uglify())
  .pipe(concat('public.js'))
  .pipe(gulp.dest('dist/js/'))
});

gulp.task('src:css', () => {
  gulp.src('src/css/*.css').pipe(clean());
  return gulp.src('./src/less/*.less')
  .pipe(less())
  .pipe(gulp.dest('src/css/'));
});

gulp.task('revision', ['dist:css', 'dist:js'], () => {
  return gulp.src(["dist/css/*.css", "dist/js/*.js"])
  .pipe(rev())
  .pipe(gulpif('*.css', gulp.dest('dist/css'), gulp.dest('dist/js')))
  .pipe(rev.manifest())
  .pipe(gulp.dest('dist'))
})

gulp.task('build', ['dist:img'], () => {
  var manifest = gulp.src('dist/rev-manifest.json');
  return gulp.src('src/index.html')
  .pipe(revReplace({
    manifest: manifest
  }))
  .pipe(useref())
  .pipe(gulp.dest('dist/'))
})

{
 "public.css": "public-5c001c53f6.css",
 "public.js": "public-93c275a836.js"
}

<!-- build:js ./js/public.js -->
<script src="/UploadFiles/2021-04-02/jquery-1.12.4.min.js">

最后生成的html为：




<script src="/UploadFiles/2021-04-02/public-93c275a836.js">

具体的语法规则可以参见gulp-useref。


创建本地服务器并实现自动刷新


使用connet.server()来创建一个本地服务器，利用gulp.watch()来对src下的文件进行监测，如果发生变化，则执行编译less为css和刷新页面的任务。




gulp.task('connect', () => {
  connect.server({
    root: 'src',
    livereload: true,
    port: 8888
  })
})

gulp.task('reload', () => {
  gulp.src('src/*.html')
  .pipe(connect.reload())
})

gulp.task('watch', () => {
  gulp.watch('src/**/*', ['src:css', 'reload'])
})


完整的代码可以参见github。


以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。