JacobDB
commented
6 years ago Quick update on this, literally the same exact setup works fine for my styles task but not my scripts task. I've pasted the two tasks below.
You can see in that I'm retrieving the path to use as the destination in exactly the same way for both tasks, and then plugging the path in to gulp-newer in exactly the same way. It really doesn't may any sense to me.
styles task:
module.exports = {
styles(gulp, plugins, ran_tasks, on_error) {
// task-specific plugins
const POSTCSS = require("gulp-postcss");
const SASS = require("gulp-sass");
const STYLELINT = require("gulp-stylelint");
// styles task, compiles & prefixes SCSS
return new Promise ((resolve) => {
// set CSS directory
const CSS_DIRECTORY = plugins.argv.dist ? global.settings.paths.dist + "/assets/styles" : global.settings.paths.dev + "/assets/styles";
const ALL_FILE_NAMES = plugins.fs.existsSync(CSS_DIRECTORY) ? plugins.fs.readdirSync(CSS_DIRECTORY) : false;
const HASHED_FILE_NAME = ALL_FILE_NAMES ? ALL_FILE_NAMES.find((name) => {
return name.match(new RegExp(CSS_DIRECTORY.split(".")[0] + ".[a-z0-9]{8}.css"));
}) : "modern.css";
// process styles
gulp.src(global.settings.paths.src + "/assets/styles/**/*.scss")
// prevent breaking on error
.pipe(plugins.plumber({
errorHandler: on_error
}))
// check if source is newer than destination
.pipe(plugins.newer({
dest: CSS_DIRECTORY + "/" + HASHED_FILE_NAME,
}))
// lint
.pipe(STYLELINT({
debug: true,
failAfterError: true,
reporters: [
{
console: true,
formatter: "string",
},
],
}))
// initialize sourcemap
.pipe(plugins.sourcemaps.init())
// compile SCSS (compress if --dist is passed)
.pipe(plugins.gulpif(plugins.argv.dist, SASS({
includePaths: "./node_modules",
outputStyle: "compressed",
}), SASS({
includePaths: "./node_modules",
})))
// process post CSS stuff
.pipe(POSTCSS([
require("pixrem"),
require("postcss-clearfix"),
require("postcss-easing-gradients"),
require("postcss-inline-svg"),
require("postcss-flexibility"),
require("postcss-responsive-type"),
]))
// generate a hash and add it to the file name
.pipe(plugins.hash({
template: "<%= name %>.<%= hash %><%= ext %>",
}))
// write sourcemap (if --dist isn't passed)
.pipe(plugins.gulpif(!plugins.argv.dist, plugins.sourcemaps.write()))
// output styles to compiled directory
.pipe(gulp.dest(CSS_DIRECTORY))
// notify that task is complete, if not part of default or watch
.pipe(plugins.gulpif(gulp.seq.indexOf("styles") > gulp.seq.indexOf("default"), plugins.notify({
title: "Success!",
message: "Styles task complete!",
onLast: true,
})))
// push task to ran_tasks array
.on("data", () => {
if (ran_tasks.indexOf("styles") < 0) {
ran_tasks.push("styles");
}
})
// generate a hash manfiest
.pipe(plugins.hash.manifest("./.hashmanifest-styles", {
deleteOld: true,
sourceDir: CSS_DIRECTORY,
}))
// output hash manifest in root
.pipe(gulp.dest("."))
// resolve the promise
.on("end", () => {
resolve();
});
});
}
};scripts task:
module.exports = {
scripts(gulp, plugins, ran_tasks, on_error) {
// task-specific plugins
const ESLINT = require("gulp-eslint");
const GLOB = require("glob");
const WEBPACK = require("webpack-stream");
// scripts task, lints, concatenates, & compresses JS
return new Promise ((resolve) => {
// set JS directory
const JS_DIRECTORY = plugins.argv.dist ? global.settings.paths.dist + "/assets/scripts" : global.settings.paths.dev + "/assets/scripts";
// set the source directory
const SOURCE_DIRECTORY = global.settings.paths.src + "/assets/scripts";
const WEBPACK_CONFIG = {
mode: "development",
entry: {
"critical": GLOB.sync(SOURCE_DIRECTORY + "/critical/**/*.js"),
"legacy": GLOB.sync(SOURCE_DIRECTORY + "/legacy/**/*.js"),
"modern": GLOB.sync(SOURCE_DIRECTORY + "/modern/**/*.js"),
"service-worker": GLOB.sync(SOURCE_DIRECTORY + "/service-worker/**/*.js"),
},
output: {
path: plugins.path.resolve(__dirname, JS_DIRECTORY),
filename: "[name].js",
},
};
// update webpack config for the current target destination and file name
WEBPACK_CONFIG.mode = plugins.argv.dist ? "production" : WEBPACK_CONFIG.mode;
const ALL_FILE_NAMES = plugins.fs.existsSync(JS_DIRECTORY) ? plugins.fs.readdirSync(JS_DIRECTORY) : false;
const HASHED_FILE_NAME = ALL_FILE_NAMES ? ALL_FILE_NAMES.find((name) => {
return name.match(new RegExp(JS_DIRECTORY.split(".")[0] + ".[a-z0-9]{8}.js"));
}) : "modern.js";
gulp.src(global.settings.paths.src + "/assets/scripts/**/*")
// prevent breaking on error
.pipe(plugins.plumber({errorHandler: on_error}))
// check if source is newer than destination
.pipe(plugins.newer({
dest: JS_DIRECTORY + "/" + HASHED_FILE_NAME,
}))
// lint all scripts
.pipe(ESLINT())
// print lint errors
.pipe(ESLINT.format())
// run webpack
.pipe(WEBPACK(WEBPACK_CONFIG))
// generate a hash and add it to the file name
.pipe(plugins.hash({template: "<%= name %>.<%= hash %><%= ext %>"}))
// output scripts to compiled directory
.pipe(gulp.dest(JS_DIRECTORY))
// generate a hash manfiest
.pipe(plugins.hash.manifest(".hashmanifest-scripts", {
deleteOld: true,
sourceDir: JS_DIRECTORY
}))
// output hash manifest in root
.pipe(gulp.dest("."))
// notify that task is complete, if not part of default or watch
.pipe(plugins.gulpif(gulp.seq.indexOf("scripts") > gulp.seq.indexOf("default"), plugins.notify({
title: "Success!",
message: "Scripts task complete!",
onLast: true,
})))
// push task to ran_tasks array
.on("data", () => {
if (ran_tasks.indexOf("scripts") < 0) {
ran_tasks.push("scripts");
}
})
// resolve the promise on end
.on("end", () => {
resolve();
});
});
}
};
I'm trying to use many:1 mapping to only run my task if files have been modified. This works great for my styles task, but I'm unable to get it to work for my scripts task.
I have a folder like so:
This compiles to:
I have my
destingulp-newerset like so:And yet, it's always passing through everything. I tried looking through the source code for gulp-newer to see what was going on but couldn't figure it out. I'd appreciate some guidance.