Question

我试图生成一个源图并缩小它但不起作用。

档案位置：test / test.less

输出：文件名测试/ 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

根据我的评论，从您的上述清单中看起来您似乎正在尝试从CSS到LESS。这没有任何意义，因为LESS（如SASS）是一个预处理器。

如果您正试图从LESS转到CSS（这是您应该做的），那么如果您想使用源图，请尝试这样的事情

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已内置<{1}}

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

1 个答案: