We have run into a problem with our sourcemaps not being found when we run them through gulp-clean-css 2.0.7 or higher. We have tested this using node 5.10.1 and 6.2.2 and we have tested every version of gulp-clean-css from 2.0.7 - 2.0.12. The following error occurs in every case:
gulp build:client --prod
Mode: Production
[10:25:52] Using gulpfile .../ui/gulpfile.js
[10:25:52] Starting 'clean:client'...
[10:25:52] Finished 'clean:client' after 8.15 ms
[10:25:52] Starting 'build:client'...
fs.js:634
return binding.open(pathModule._makeLong(path), stringToFlags(flags), mode);
^
Error: ENOENT: no such file or directory, open '.../ui/templates/build/styles/bootstrap-4cc48fd547.css.map'
at Error (native)
at Object.fs.openSync (fs.js:634:18)
at Object.fs.readFileSync (fs.js:502:33)
at fromSource (.../ui/node_modules/clean-css/lib/utils/input-source-map-tracker.js:84:30)
at InputSourceMapStore.track (.../ui/node_modules/clean-css/lib/utils/input-source-map-tracker.js:237:5)
at Object.whenDone (.../ui/node_modules/clean-css/lib/clean.js:145:44)
at processNext (.../ui/node_modules/clean-css/lib/imports/inliner.js:105:13)
at importFrom (.../ui/node_modules/clean-css/lib/imports/inliner.js:79:10)
at ImportInliner.process (.../ui/node_modules/clean-css/lib/imports/inliner.js:38:10)
at .../ui/node_modules/clean-css/lib/clean.js:120:41
at _combinedTickCallback (internal/process/next_tick.js:67:7)
at process._tickCallback (internal/process/next_tick.js:98:9)
We are taking multiple modules and building them out as separate files. Each file has it's own .map file and this is the one that seems to be not found. They end up in /ui/public/build/styles/...
not the templates folder as see above.
Below is the gulp task and package.json. This is a large older code base, so some of it might be a little convoluted. ;)
var buildClient = lazypipe()
.pipe($.useref,
{ searchPath: config.paths.files.libs },
lazypipe().pipe($.sourcemaps.init, {loadMaps: true}),
lazypipe().pipe(function() {
return $.if('.less', styles()());
}
))
.pipe($.plumber)
.pipe(function() {
return $.if('*.js',scripts()());
})
.pipe(function() {
return $.if('*.css',styles()());
})
.pipe($.sourcemaps.write, './')
.pipe($.revReplace)
.pipe(gulp.dest, config.paths.folders.public)
.pipe($.rev.manifest, config.paths.files.manifest,{
base: process.cwd() + '/' + config.paths.folders.build,
merge: true
})
.pipe(gulp.dest, config.paths.folders.build);
gulp.task('build:client', ['clean:client'], function() {
var isCompiled = options.prod && fs.existsSync(config.paths.files.manifest);
var excludeFiles = function(filename) {
if(_.includes([
'build/scripts/simplifile.js',
'build/scripts/vendor.js',
'build/styles/vendor.css'
],filename)) {
return 'excluded-text-that-should-not-be-found-in-the-file.js';
}
return filename;
};
return gulp.src(config.paths.files.views.main)
.pipe($.if(isCompiled, $.revReplace({
manifest: gulp.src('./' + config.paths.files.manifest),
modifyUnreved: excludeFiles
})))
.pipe(buildClient())
});
function styles(templateName) {
var isTemplateName = typeof templateName !== 'undefined';
return lazypipe()
.pipe(function() {
return $.if('*.less', $.less({
paths: ["src"],
customFunctions: sfColorFunctions
}).on('error', $.util.log));
})
.pipe(function() {
return $.if(isTemplateName, $.concat(templateName + '.css'));
})
.pipe(function() {
return $.if(options.prod, $.cleanCss())
})
.pipe(function() {
return $.if(options.prod, $.rev())
});
}
"dependencies": {
"cheerio": "0.20.0",
"colors": "0.6.2",
"console.table": "0.7.0",
"del": "2.2.1",
"foreman": "0.4.2",
"gulp-debug": "0.3.1",
"gulp-filter": "0.5.1",
"gulp-footer": "1.0.5",
"gulp-header": "1.8.7",
"gulp-load-plugins": "1.2.4",
"gulp-rename": "1.2.2",
"gulp-rev": "7.1.0",
"gulp-rev-replace": "0.4.3",
"gulp-sourcemaps": "0.4.6",
"gulp-tap": "0.1.3",
"gulp-useref": "3.1.0",
"http-proxy": "1.14.0",
"jsonfile": "2.3.1",
"lazypipe": "1.0.1",
"lodash": "4.13.1",
"run-sequence": "0.3.7",
"wiredep": "4.0.0",
"wrench": "1.5.9",
"yargs": "3.32.0"
},
"devDependencies": {
"bower": "1.7.9",
"eslint": "2.13.1",
"eslint-config-angular": "0.5.0",
"eslint-plugin-angular": "1.3.0",
"event-stream": "3.3.4",
"git-guppy": "=1.2.1",
"gulp": "3.9.1",
"gulp-cached": "1.1.0",
"gulp-clean": "0.3.2",
"gulp-clean-css": "2.0.7",
"gulp-concat": "2.6.0",
"gulp-concat-sourcemap": "1.3.1",
"gulp-conflict": "0.4.0",
"gulp-data": "1.2.1",
"gulp-debug": "0.3.1",
"gulp-directory-map": "0.1.3",
"gulp-eslint": "2.1.0",
"gulp-file": "0.3.0",
"gulp-flatten": "0.2.0",
"gulp-gitmodified": "1.1.1",
"gulp-htmlmin": "1.3.0",
"gulp-if": "2.0.1",
"gulp-inject": "1.5.0",
"gulp-inject-string": "1.1.0",
"gulp-less": "file:lib-custom/gulp-less",
"gulp-livereload": "2.1.1",
"gulp-match": "1.0.2",
"gulp-minify-html": "0.1.8",
"gulp-ng-annotate": "0.5.3",
"gulp-ng-html2js": "0.2.2",
"gulp-plumber": "0.6.6",
"gulp-rename": "1.2.2",
"gulp-replace": "0.5.4",
"gulp-shell": "0.5.2",
"gulp-sort": "1.1.1",
"gulp-sourcemaps": "0.4.6",
"gulp-task-listing": "0.3.0",
"gulp-template": "0.1.2",
"gulp-tslint": "5.0.0",
"gulp-typescript": "2.13.6",
"gulp-uglify": "1.5.4",
"gulp-util": "3.0.7",
"gulp-watch": "4.3.8",
"guppy-pre-commit": "0.3.0",
"inquirer": "0.12.0",
"jasmine-core": "2.4.1",
"jasmine-promises": "0.4.1",
"jasmine-reporters": "2.2.0",
"karma": "0.13.22",
"karma-chrome-launcher": "1.0.1",
"karma-coffee-preprocessor": "1.0.1",
"karma-coverage": "1.1.0",
"karma-firefox-launcher": "1.0.0",
"karma-html2js-preprocessor": "1.0.0",
"karma-jasmine": "1.0.2",
"karma-junit-reporter": "1.1.0",
"karma-ng-scenario": "1.0.0",
"karma-notification-reporter": "0.1.1",
"karma-phantomjs-launcher": "1.0.1",
"karma-requirejs": "1.0.0",
"karma-script-launcher": "1.0.0",
"karma-spec-reporter": "0.0.26",
"main-bower-files": "2.13.1",
"merge-stream": "1.0.0",
"mkdirp": "0.5.1",
"node-static": "0.7.7",
"nopt": "2.2.1",
"requirejs": "2.2.0",
"run-sequence": "0.3.7",
"through2": "2.0.1",
"tslint": "3.11.0",
"underscore.string": "2.4.0"
}