gulp的基本使用及构建项目实现浏览器实时同步、自动刷新

// gulp使用准备：
// 1.使用npm i gulp 下载gulp库文件
// 2.在项目根目录下建立gulpfile.js文件
// 3.重构项目的文件夹结构src目录放置源代码文件，dist目录存放构建后的文件
// 4.在gulpfile.js文件中编写任务
// 5.在命令行工具中执行gulp任务（需要先安装gulp命令行工具：npm i gulp-cli -g）

// gulp中提供的方法
// gulp.src()      获取任务要处理的文件
// gulp.dest()     输出文件
// gulp.task()     建立gulp任务
// gulp.watch()    监控文件的变化
// gulp.run()      执行指定的任务

// gulp常用插件(去npm看文档)
// gulp-htmlmin:       html压缩
// gulp-csso:          css压缩
// gulp-babel:         es6转es5
// gulp-less:          翻译less
// gulp-sass:          翻译sass
// gulp-uglify:        压缩混淆js
// gulp-file-include:  公共文件包含
// browsersync:        浏览器实时同步
// gulp-watch:         监控文件变化（自带的gulp.watch()无法监听到新增加的文件，这个模块可以）

const gulp = require('gulp');
const sass = require('gulp-sass');
const csso = require('gulp-csso');
const babel = require('gulp-babel');
const uglify = require('gulp-uglify');
const htmlmin = require('gulp-htmlmin');
const browsersync = require('browser-sync');
const watch = require('gulp-watch');

const path = {
    sass: 'src/css/*.scss',
    js: 'src/js/*.js',
    html: 'src/*.html'
};
// 使用gulp.task建立任务
gulp.task('sass', () => { // gulp-cli安装后命令行使用gulp sass即可执行该任务
    gulp.src(path.sass)
        .pipe(sass().on('error', sass.logError)) // 编译sass
        .pipe(csso()) // css代码压缩
        .pipe(gulp.dest('dist/css')) // 输出
        .pipe(browsersync.stream());// 刷新浏览器
});
gulp.task('jsmin', () => {
    gulp.src(path.js)
        .pipe(babel({
            presets: ['@babel/env']
         })) // es6转es5
        .pipe(uglify())// js代码压缩
        .pipe(gulp.dest('dist/js'))
        .pipe(browsersync.stream());
});
gulp.task('htmlmin', () => {
    gulp.src(path.html)
        .pipe(htmlmin({ collapseWhitespace: true })) //html代码压缩
        .pipe(gulp.dest('dist'))
        .pipe(browsersync.stream());
});
gulp.task('othermove', () => {  // 该任务是将项目中其他依赖文件夹及文件拷贝到dist下
    gulp.src('src/audio/**/*')
        .pipe(gulp.dest('dist/audio'));
    gulp.src('src/img/**/*')
        .pipe(gulp.dest('dist/img'));
});
//定义监听文件修改的任务
gulp.task('watch', function () {
    watch(path.html, gulp.series('htmlmin'));
    watch(path.sass, gulp.series('sass'));
    watch(path.js, gulp.series('jsmin'));
});

// 创建服务
gulp.task('browsersync', () => {
    browsersync.init({
        server: {
            baseDir: 'dist/'
        }
    });
});
// -------------------gulp3.9写法--------------------
// gulp.task('default', ['sass', 'jsmin', 'htmlmin', 'othermove', 'browsersync', 'watch']);
// -------------------gulp4.0以后写法--------------------
// 此时命令行执行gulp命令即可执行gulp.parallel中的所有任务将src中的源代码处理后输出到dist目录下并将输出后的项目使用browsersync打开，在修改src下的scss、js、html保存时会自动执行对应任务输出并刷新浏览器
gulp.task('default', gulp.parallel('sass', 'jsmin', 'htmlmin', 'othermove', 'browsersync', 'watch'));

demo中细节上还很多没去完善，比如监听文件保存操作执行对应任务刷新浏览器，在开发环境没有必要去做压缩代码的操作，不然性能上也会下降，应该在生产环境进行代码压缩这类操作等。