Question

如何将CSS处理为单独传输的源图文件，并保留附加的文件名+ .map？

假设我们有以下内容：

/assets/stylesheets/scss/
    site.scss
    other.scss
    home.scss
/assets/stylesheets/compiled/
    site.css
    other.css
    home.css

我正在寻找的是：

/assets/stylesheets/scss/
    site.scss
    other.scss
    home.scss
/assets/stylesheets/compiled/
    site.css
    site.css.map
    other.css
    other.css.map
    home.css
    home.css.map

我想为那些使用Gulp的人生成CSS源图。唯一的问题是，我不确定如何为每个CSS文件创建一个源图。这就是我所拥有的，但它只生成一个site.css文件：

var gulp = require('gulp'),
    gulpif = require('gulp-if'),
    concat = require('gulp-concat'),
    sass = require('gulp-sass'),
    minify = require('gulp-minifier'),
    autoprefixer = require('gulp-autoprefixer'),
    sourcemaps = require('gulp-sourcemaps');

...

gulp.task('sass', function(){
    return gulp
        .src(config.publicDir + '/stylesheets/scss/*.scss')
        //.pipe(sourcemaps.init())
        .pipe(sass().on('error', sass.logError))
        .pipe(sass({
            includePaths: [config.bootstrapDir + '/assets/stylesheets'],
        }))
        .pipe(gulpif(overrides.disable_minify, minify({
            minify: true,
            collapseWhitespace: true,
            minifyJS: false,
            minifyCSS: true,
            getKeptComment: function(content, filePath){
                var m = content.match(/\/\*![\s\S]*?\*\//img);
                return m && m.join('\n') + '\n' || '';
            },
        })))
        .pipe(gulp.dest(config.publicDir + '/stylesheets/compiled'))
    ;
});
tasks.push('sass');

...

gulp.task('sourcemaps', function() {
    return gulp
        .src(config.publicDir + '/stylesheets/compiled/*.css')
        .pipe(sass().on('error', sass.logError))
        .pipe(sourcemaps.init())
        .pipe(autoprefixer())
        .pipe(concat('site.css'))
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest(config.publicDir + '/stylesheets/compiled'))
});
tasks.push('sourcemaps');

Answer 1

我想我弄清楚我在做什么：我正在处理它两次。此外，concat()和autoprixer()的使用是多余的（前者存在问题）。所以这就是我最终的结果，它应该是一个非常通用的Bootstrap构建脚本：

var gulp = require('gulp'),
    gulpif = require('gulp-if'),
    sass = require('gulp-sass'),
    minify = require('gulp-minifier'),
    sourcemaps = require('gulp-sourcemaps');

var tasks = [],
    overrides = {
        disable_watcher: false,
        disable_minify: true,
    },
    config = {
        bootstrapDir: process.cwd()+'/public_html/bootstrap-sass',
        publicDir: process.cwd()+'/public_html/assets',
    };

gulp.task('sass', function(){
    return gulp
        .src(config.publicDir + '/stylesheets/scss/*.scss')
        .pipe(sass({
            includePaths: [config.bootstrapDir + '/assets/stylesheets'],
        }))
        .pipe(sourcemaps.init())
        .pipe(sass().on('error', sass.logError))
        .pipe(sourcemaps.write('.'))
        .pipe(gulpif(!overrides.disable_minify, minify({
            minify: true,
            collapseWhitespace: true,
            minifyJS: false,
            minifyCSS: true,
            getKeptComment: function(content, filePath){
                var m = content.match(/\/\*![\s\S]*?\*\//img);
                return m && m.join('\n') + '\n' || '';
            },
        })))
        .pipe(gulp.dest(config.publicDir + '/stylesheets/compiled'))
    ;
});
tasks.push('sass');

if (!overrides.disable_watcher && tasks.indexOf('sass') !== -1) {
    gulp.task('watch', function(){
        gulp.watch(config.publicDir + '/stylesheets/scss/*.scss', ['sass']);
    });
    tasks.push('watch');
}

gulp.task('default', tasks);

为多个主scss文件创建CSS源图

1 个答案: