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

Question

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

文件位置:test/test.less

输出:文件名 测试/test.less

map 文件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

根据我的评论，从您上面的 list 来看，您似乎正试图从 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