Reputation: 123
I'm studying GULP, and I want the page to update automatically when I modify the 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"]);
I'm trying to use "gulp-watch", but it's giving the error "Task function must be specified" in this code above.
Upvotes: 1
Views: 266
Reputation: 123
The problem was that I was trying to watch the old version of GULP, not version 4.0.0.
So I changed my code to work, and it looked like this:
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"))
);
Upvotes: 1