Problems creating source map files with the current Gulp installation

Question

I created gulpfile.js in my project. It works pretty nicely basically, except when it comes to creating source maps, especially for LESS files, which it compiles into CSS .

I compiled a gist that contains all the files in my gulp setup. Note that in addition to the gulp file.js file, all other files are located in a directory called tasks .

I'm having problems with the fact that

• I had to disable autoprefixer in development because the source maps that were generated were not valid because the auto-receiver modified the source CSS file after creating the source maps. To compensate, I added mixes that add vendor prefixes during development, and I have to disable them for development and enable the autoprefixer tool for the production environment.
• I cannot generate a mini CSS file at all if I want the source maps. Mineralization splits source maps.
• Although I have a LiveReload setting and related browser plugins, I can't get CSS to automatically load onto the page as I make changes.

If someone can help me structure my gulp file.js file to work more efficiently and more efficiently, I would appreciate it.

Again, my gulpfile.js and related tasks are in this gist .

Answer 1

I had to disable autoprefixer in development because the source maps that were generated

The docs at https://www.npmjs.com/package/gulp-autoprefixer describe how to use autoprefixer with gulp -sourcemaps:

 gulp.task('default', function () { return gulp.src('src/**/*.css') .pipe(sourcemaps.init()) .pipe(autoprefixer()) .pipe(concat('all.css')) .pipe(sourcemaps.write()) .pipe(gulp.dest('dist')); }); 

The above create a new source map for all.css. So you must first load the source map generated by the less compiler, see https://github.com/floridoo/gulp-sourcemaps#load-existing-source-maps

The gulp docs -minify-css docs don't describe such use, but you can do this:

 gulp.task('minify-css', function() { gulp.src('./static/css/*.css') .pipe(sourcemaps.init({loadMaps: true})) .pipe(minifyCSS({keepBreaks:true})) .pipe(sourcemaps.write()) .pipe(gulp.dest('./dist/')) }); 

Please note that in most cases you only shorten your production code. Development code that has source maps should not be minimized.

Starting with version 2 of Less, you can use plugins for the Less compiler. In addition, gulp -less allows you to use these plugins (software), see also http://lesscss.org/usage/#plugins-using-a-plugin-in-code

The gulp -less documentation describes how to use the clean-css and autoprefix plugin at https://github.com/plus3network/gulp-less#plugins . Note that gulp -minify-css also uses clean code.

Also using gulp -less with gulp -sourcemaps to create sourcemaps is described at https://github.com/plus3network/gulp-less#source-maps

So you should be able to use:

 var LessPluginCleanCSS = require("less-plugin-clean-css"), cleancss = new LessPluginCleanCSS({advanced: true}); var LessPluginAutoPrefix = require('less-plugin-autoprefix'), autoprefix= new LessPluginAutoPrefix({browsers: ["last 2 versions"]}); gulp.src('./less/**/*.less') .pipe(sourcemaps.init()) .pipe(less({ plugins: [autoprefix, cleancss] })) .pipe(sourcemaps.write('./maps')) .pipe(gulp.dest('./public/css')); 

The above should generate the autoprefixed and minified CSS of your Less source, with the original CSS maps written in. / Public / css / maps