我正在学习GULP,并且我希望在修改CSS时自动更新页面。
const gulp = require("gulp");
const jshint = require("gulp-jshint");
const changed = require("gulp-changed");
const watch = require("gulp-watch");
const rename = require("gulp-rename");
const minifyCSS = require("gulp-uglifycss");
const sass = require("gulp-sass");
const cssImport = require("gulp-cssimport");
gulp.task("changed", function() {
return gulp
.src("src/css/*.css")
.pipe(changed("public/assets/css/"))
.pipe(cssImport())
.pipe(sass())
.pipe(minifyCSS())
.pipe(rename({ extname: ".min.css" }))
.pipe(gulp.dest("public/assets/css/"));
});
gulp.task("jshint", function() {
gulp
.src("src/css/*.css")
.pipe(jshint())
.pipe(jshint.reporter("default"));
});
gulp.task("watch", function() {
watch("src/css/*.css", ["changed"]);
});
gulp.task("default", ["jshint", "watch"]);
我正在尝试使用 “ gulp-watch” ,但出现错误 “必须指定任务功能” ,上面的代码中。
答案 0 :(得分:0)
问题是我正在尝试查看旧版本的GULP,而不是版本4.0.0。
所以我将代码更改为可以使用,它看起来像这样:
const gulp = require("gulp");
const rename = require("gulp-rename");
const minifyJS = require("gulp-uglify");
const minifyCSS = require("gulp-uglifycss");
const sass = require("gulp-sass");
const babel = require("gulp-babel");
const cssImport = require("gulp-cssimport");
gulp.task(
"base",
gulp.series(function() {
return gulp.src("src/templates/*.html").pipe(gulp.dest("public/"));
})
);
gulp.task(
"javascript",
gulp.series(function() {
return gulp
.src("src/js/*.js")
.pipe(babel({ presets: ["@babel/env"] }))
.pipe(minifyJS())
.pipe(rename({ extname: ".min.js" }))
.pipe(gulp.dest("public/assets/js/"));
})
);
gulp.task(
"css",
gulp.series(function() {
return gulp
.src("src/css/*.css")
.pipe(cssImport())
.pipe(sass())
.pipe(minifyCSS())
.pipe(rename({ extname: ".min.css" }))
.pipe(gulp.dest("public/assets/css/"));
})
);
gulp.task(
"watch",
gulp.series(function() {
gulp.watch("src/templates/*.html", gulp.parallel(["base"]));
gulp.watch("src/js/*.js", gulp.parallel(["javascript"]));
gulp.watch("src/css/*.css", gulp.parallel(["css"]));
})
);
gulp.task(
"default",
gulp.series(gulp.parallel("base", "javascript", "css", "watch"))
);