How to make sourcemap and comressped file using gulp

Question

I'm trying to generate a sourcemap and minify it but it is not working.

file position: test/test.less

output: file name test/test.less

map file test.css.map

compressed file test.min.css

When I load that file on browser then it is not loaded, but when I load bootstrap.css.map file then it is showing every css or less file.

var gulp = require( "gulp" ),
    concat = require( "gulp-concat" ),
    watch = require( "gulp-watch" ),
    notify = require( "gulp-notify" ),
    less = require( "gulp-less" ),
    sourcemaps = require( "gulp-sourcemaps" );

var testCSSFile = "test/test.css";
var filePosition = "test";

gulp.task( "testCSS", function() {

    gulp.src( testCSSFile )
        .pipe( concat( "test.less" ) )
        .pipe( sourcemaps.init() )

        .pipe( less() )
        .pipe( sourcemaps.write( ".") )
        .pipe( gulp.dest(filePosition) )
        .pipe( notify( "testCSS task completed." ) );

     return gulp.src( testCSSFile )
        .pipe( concat( "test.min.less" ) )
        .pipe( less({
            compress: true
        }) )
        .pipe( gulp.dest(filePosition) )
        .pipe( notify( "testCSS task completed." ) );
});

gulp.task( "watch", function() {
    gulp.watch( testCSSFile, [ "testCSS" ] );
});

gulp.task( "default", [
    "testCSS",

    "watch"
] );

From your above manifest it looks like you're trying to go from css to less. Why? — darryn.ten, Mar 06 '15 at 11:42

darryn.ten · Answer 1 · 2015-03-06T14:20:40.680

As per my comments, from your above manifest it looks like you're trying to go from CSS to LESS. This makes no sense, as LESS (like SASS) is a pre-processor.

If you're trying to go from LESS to CSS (which is what you should be doing) then try something like this if you want to use sourcemaps

var gulp = require('gulp');
var rename = require('gulp-rename');
var less = require('gulp-less-sourcemap'); // important distinction

// Define paths to your .less file(s)
var paths = [
    'test/*.less'
];

// Tell gulp what the default tasks to run are
gulp.task('default', ['less', 'watch']);

// The main task
gulp.task('less', function() {
    gulp.src(paths)
        .pipe(less({
            sourceMap: {
                sourceMapRootpath: '../test'  // Optional  
            }
        }))
        .pipe(rename({
            extname: '.css'
        }))
        .pipe(gulp.dest('.')) // Will put 'test.css' in the root folder

});

// Tell gulp to watch the defined path
gulp.task('watch', function() {
    gulp.watch(paths, ['less']);
});

I haven't verified the above code by creating a directory like yours, but that should give you a good starting point. Copy pasting this will most likely not work.

Another note is that you don't need gulp-watch as this is built into gulp

By using this -- "When i put two file inside test folder, like var paths =[ "test/test1.less", "test/test2.less" ]; then there are two different sourcemap file generate. How to merge all .less file in one sourcemap file " – — krishna kumar, Mar 09 '15 at 06:46

How to make sourcemap and comressped file using gulp

1 Answers1