安装

// 全局安装以便可以命令行调用gulp命令
npm install -g gulp-cli

npm init -y
npm i gulp -D

gulpfile.js

  • 旧task写法
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; //测试时这个插件有问题

参考

https://www.gulpjs.com.cn/docs/getting-started/quick-start/

最后修改:2021 年 05 月 28 日 08 : 41 PM