// 全局安装以便可以命令行调用gulp命令
npm install -g gulp-cli
npm init -y
npm i gulp -D
gulpfile.js
const gulp = require("gulp");
const imagemin = require("gulp-imagemin");
const uglify = require("gulp-uglify");
const sass = require("gulp-sass");
const concat = require("gulp-concat");
const { series } = require("gulp");
// 复制文件
gulp.task("html", async function () {
gulp.src("src/*.html").pipe(gulp.dest("dist"));
});
// 压缩图片 得用cnpm安装
gulp.task("img", async function () {
gulp.src("src/*.{jpg,png,gif}")
.pipe(imagemin())
.pipe(gulp.dest("dist/imgs"));
});
// 压缩合并js
gulp.task("js", async function () {
gulp.src("src/*.js")
.pipe(concat("index.js"))
.pipe(uglify())
.pipe(gulp.dest("dist/js"));
});
// sass处理
gulp.task("css", async function () {
gulp.src("src/*.scss")
.pipe(sass().on("error", sass.logError))
.pipe(gulp.dest("dist/css"));
});
// 监听文件变化
gulp.task("watch", function () {
gulp.watch("src/*.js", series("js"));
gulp.watch("src/*.html", series("html"));
});
// 组合任务
gulp.task("default", series("html", "css", "img", "js"));
const imagemin = require("gulp-imagemin");
const uglify = require("gulp-uglify");
const sass = require("gulp-sass");
const concat = require("gulp-concat");
const babel = require("gulp-babel");
const gulp = require("gulp");
const del = require("del");
// 复制文件
function html() {
return gulp.src("src/*.html").pipe(gulp.dest("dist"));
}
// 压缩图片 得用cnpm安装
function img() {
return gulp
.src("src/*.{jpg,png,gif}")
.pipe(imagemin())
.pipe(gulp.dest("dist/imgs"));
}
// 压缩合并js
function js() {
return gulp
.src("src/*.js")
.pipe(concat("index.js"))
.pipe(babel())
.pipe(uglify())
.pipe(gulp.dest("dist/js"));
}
// sass处理
function css() {
return gulp
.src("src/*.scss")
.pipe(sass().on("error", sass.logError))
.pipe(gulp.dest("dist/css"));
}
// 清空输出
function clean() {
return del("dist/**/*");
}
// 监听文件变化
function watch() {
gulp.watch("src/*.js", gulp.series(js));
gulp.watch("src/*.html", gulp.series(html));
}
// 组合任务
exports.default = gulp.series(clean, html, css, js);
exports.watch = watch;
exports.clean = clean;
exports.img = img; //测试时这个插件有问题
//编译
gulp
//监听
gulp watch
其他
- 新版sass需要安装
npm i -D sass gulp-sass并如下引用
const sass = require('gulp-sass')(require('sass'));
参考
https://www.gulpjs.com.cn/docs/getting-started/quick-start/