项目结构
- src
- components // 这里是一些公共html模板
- css // 根据需要可以选择less或者sass
- img // 可以根据需要建立下级目录
- js // 公共脚本和页面脚本
- lib // 公共资源和第三方脚本
上图
package.json代码
{
"name": "projectname",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "gulp -f gulpfile.js default",
"pro": "gulp -f gulppro.js default"
},
"keywords": [],
"author": "apple-ping",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.26.0",
"babel-preset-es2015": "^6.24.1",
"del": "^5.1.0",
"gulp-concat": "^2.6.1",
"gulp-babel": "^7.0.0",
"gulp-file-include": "^2.1.0",
"gulp-htmlmin": "^5.0.1",
"gulp-imagemin": "^6.1.0",
"gulp-less": "^4.0.1",
"gulp-sass": "^4.0.2", // 使用sass的下载
"gulp-uglify": "^3.0.2"
},
"dependencies": {
"browser-sync": "^2.26.7",
"gulp": "^4.0.2",
"gulp-minify-css": "^1.2.4"
}
}
这里babel是有版本差异的,自行下载可能会有冲突
.babelrc代码
{
"presets": [
"es2015"
],
"plugins": []
}
gulp.js代码
// 引入插件
const gulp = require("gulp");
const del = require("del"); // 先删除旧的文件 del
const less = require("gulp-less"); // 编译less文件
const htmlmin = require('gulp-htmlmin'); // 压缩html文件
const cssmin = require('gulp-minify-css'); // 压缩css文件
const imagemin = require('gulp-imagemin'); // 压缩img文件
const uglify = require("gulp-uglify"); // 压缩js文件
const babel = require("gulp-babel"); // es6转es5
const fileInclude = require("gulp-file-include"); // 模板引擎
const browserSync = require("browser-sync"); // 自动更新
// 删除 任务
gulp.task("del", () => {
return del(["./dist"]);
});
//js 打包压缩
gulp.task("js", () => {
return gulp
.src(["./src/js/*.js", "./src/js/**/*.js"])
.pipe(babel())
.pipe(uglify()) //压缩
.pipe(gulp.dest('./dist/js/'));
});
//css 打包压缩
gulp.task('css', () => {
return gulp
.src(["./src/css/*.less", "./src/css/**/*.less"])
.pipe(less())
// 这里是使用sass的示例
// .pipe(sass({
// outputStyle: 'expanded'
// }).on('error', sass.logError))
.pipe(cssmin())
.pipe(gulp.dest('./dist/css/'))
});
// 图片压缩
gulp.task('img', () => {
return gulp
.src("./src/img/**")
.pipe(imagemin())
.pipe(gulp.dest('./dist/img/'));
});
// html压缩
gulp.task('html', () => {
return gulp
.src(["src/page/*.html", "src/page/**/*.html"])
.pipe(
fileInclude({
prefix: "@@",
basepath: "src/components/",
})
)
.pipe(htmlmin({
collapseWhitespace: true
}))
.pipe(gulp.dest('./dist/'));
});
// 执行 负责第三方插件 任务
gulp.task("lib", () => {
return gulp
.src("./src/lib/**")
.pipe(gulp.dest("./dist/lib/"));
});
// 自动打开浏览器 和 监听文件的改变 刷新浏览器
gulp.task("autopage", () => {
browserSync({
server: {
baseDir: "./dist"
},
port: 8888,
// 取消页面刷新提示
notify: false
});
// 监听html文件的改变 从而重新执行 html 任务 刷新浏览器
gulp.watch(["src/page/*.html", "src/page/**/*.html", "src/components/*.html"], gulp.series(["html", "reload"]));
// 监听 less文件, 重新执行 css 任务 刷新浏览器
gulp.watch(["./src/css/*.less", "./src/css/**/*.less"], gulp.series(["css", "reload"]));
// 监听 js文件, 重新执行 js 任务 刷新浏览器
gulp.watch(["./src/js/*.js", "./src/js/**/*.js"], gulp.series(["js", "reload"]));
// 监听 img文件, 重新执行 img 任务 刷新浏览器
gulp.watch("./src/img/**", gulp.series(["img", "reload"]));
});
gulp.task("reload", (done) => {
browserSync.reload();
done();
});
// 定义默认任务
gulp.task("default", gulp.series(["del", "css", "js", "html", "lib", "img", "autopage"]));
文件使用中括号引入可以生成多级目录,其他都有注释就不一一说明了