如何使用 gulp 制作 sourcemap 和压缩文件

Question

我正在尝试生成源地图并缩小它，但它不起作用。

文件位置：test/test.less

输出：文件名 test/test.less

地图文件test.css.map

压缩文件 test.min.css

当我在浏览器上加载该文件时，它不会被加载，但是当我加载 bootstrap.css.map 文件时，它会显示每个 css 或更少的文件。

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"
] );

Answer 1

根据我的 cmets，从您上面的清单看来，您正试图从 CSS 转到 LESS。这是没有意义的，因为 LESS（如 SASS）是一个预处理器。

如果您尝试从 LESS 转到 CSS（这是您应该做的），那么如果您想使用 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']);
});

我还没有通过创建像您这样的目录来验证上述代码，但这应该会给您一个很好的起点。复制粘贴很可能不起作用。

另一个注意事项是您不需要gulp-watch，因为它内置于gulp