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