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

我正在尝试生成一个sourcemap并缩小它，但它不起作用

文件位置：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"
] );

---

根据我的评论，从您上面的清单来看，您似乎正在尝试从CSS变为更少的CSS。这毫无意义，因为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']);
});

我还没有通过创建一个类似于您的目录来验证上述代码，但这应该为您提供一个良好的起点。复制粘贴这很可能不起作用

---

另一个注意事项是，您不需要

gulpwatch

，因为它内置于

gulp

中，从上面的清单中可以看出，您正在尝试从css变为更少。为什么？通过使用这个--“当我在测试文件夹中放置两个文件时，比如var path=[“test/test1.less”，“test/test2.less”]；然后会生成两个不同的sourcemap文件。如何将所有.less文件合并到一个sourcemap文件中”–