Question

我目前正在使用gulp工作流，该工作流使用createSassTask()方法为同一项目中的几个不同httpddocs目录中的每一个生成任务。以下是我当前的gulpfile.js：

var package = require('./package.json'),
    gulp = require('gulp'),
    sass = require('gulp-sass'),
    autoprefixer = require('gulp-autoprefixer'),
    concat = require('gulp-concat'),
    uglify = require('gulp-uglify'),
    rename = require('gulp-rename'),
    minifyCSS = require('gulp-minify-css'),
    notify =  require('gulp-notify');

function createSassTask(directory) {
    var taskName = 'sass-'+directory;
    gulp.task(taskName, function() {
        return gulp.src('./'+directory+'/media/sass/**/*.scss')
            .pipe(sass({errLogToConsole: true}))
            .pipe(autoprefixer('last 4 version'))
            .pipe(minifyCSS({keepBreaks:true}))
            .pipe(rename({suffix: '.min' }))
            .pipe(gulp.dest('./'+directory+'/media/css'))
            .pipe(notify('SASS compiled for ' + directory));
    });
    gulp.watch('./'+directory+'/media/sass/**/*.scss', [taskName]);
}

gulp.task('default', function () {
    createSassTask('httpdocs-site1');
    createSassTask('httpdocs-site2');
    createSassTask('httpdocs-site3');
});

如何最好地将源图使用此类任务？我尝试使用gulp-sourcemaps，但我需要能够围绕sass，autoprefixer，minifyCSS和重命名包装init()和write()函数。我不认为minifyCSS或重命名支持gulp-sourcemaps。还有其他/更好的方法吗？

Answer 1

您依赖于在管道中使用的每个gulp-plugin上对源映射的支持。

可以找到支持插件的完整表格here。

这是一个已知问题，也适用于例如@import Sass文件的情况。在GitHub上看到这一点，他们使用（丑陋的）方法解决这个问题，方法是将源图管理两次，以便它可以包围每个插件。

Answer 2

当gulp- * plugins（gulp-less，gulp-concat，gulp-minify-css，...）有sourcemaps support时，它“应该”起作用。

我的问题是我使用了那些个人gulp- *插件的旧版本。源映片稍后在以后的版本中添加。始终检查您是否使用了最新版本的gulp- *插件（支持源映射）。

如何在gulp-sass + gulp-minify-css + autoprefixer + rename中使用源图？

2 个答案: