Question

我有一组5个CSS文件，当前由我的Gulp文件压缩生成。

我需要更改我的设置，以便其中一个文件以紧凑模式编译而不是注释。我不想在我的所有文件中应用它，否则它们会变得太大。

有人可以帮忙吗？

这是我的gulp文件......

    var gulp = require("gulp"),
    del = require("del"),
    concat = require("gulp-concat"),
    rename = require("gulp-rename"),
    compass = require("gulp-compass"),
    uglify = require("gulp-uglify");

var files = {
    js: "ministryweb.js",
    minJs: "ministryweb.min.js",
    compassConfig: "config-release.rb",
    compassConfigDbg: "config-debug.rb",
    compassConfigText: "config-text.rb"
}

var paths = {
    webroot: "./"
};

paths.css = paths.webroot + "css/";
paths.scripts = paths.webroot + "Scripts/";
paths.scss = paths.css + "scss/";
paths.src = paths.scripts + "src/";
paths.bundleJs = paths.scripts + files.js;
paths.minJs = paths.scripts + files.minJs;
paths.compiledCss = paths.css + "*.css";
paths.sourceScss = paths.scss + "*.scss";
paths.compassConfig = paths.css + files.compassConfig;
paths.compassConfigDbg = paths.css + files.compassConfigDbg;
paths.compassConfigText = paths.css + files.compassConfigText;

var runCompass = function (cfgPath) {
    return gulp.src(paths.sourceScss)
      .pipe(compass({
          config_file: cfgPath,
          css: paths.css,
          sass: paths.scss
      }))
      .pipe(gulp.dest(paths.css));
};

gulp.task('clean:js', function (cb) {
    del([
      paths.bundleJs,
      paths.minJs
    ], cb);
});

gulp.task("clean:css", function (cb) {
    del(paths.compiledCss, cb);
});

gulp.task("bundle:js", ["clean:js"], function () {
    return gulp.src([
              paths.src + "global.js",
              paths.src + "ministry.js",
              paths.src + "ministry.menu.js",
              paths.src + "ministry.blog.js",
              paths.src + "disqus-loader.js",
              paths.src + "twitter-loader.js"])
    .pipe(concat(files.js))
    .pipe(gulp.dest(paths.scripts));
});

gulp.task("min:js", ["bundle:js"], function () {
    var ret = gulp.src(paths.bundleJs)
    .pipe(rename(files.minJs))
    .pipe(uglify())
    .pipe(gulp.dest(paths.scripts));

    del(paths.bundleJs);

    return ret;
});

gulp.task("compass", ["clean:css"], function () {
    return runCompass(paths.compassConfig);
});

gulp.task("compass-debug", ["clean:css"], function () {
    return runCompass(paths.compassConfigDbg);
});

gulp.task("clean", ["clean:js", "clean:css"]);

gulp.task("build-debug", ["bundle:js", "compass-debug"]);

gulp.task("build", ["min:js", "compass"]);

我的config.rb，我的实时部署......

# Require any additional compass plugins here.

#Folder settings
relative_assets = true      #because we're not working from the root
css_dir = "../css"          #where the CSS will saved
sass_dir = "../css/scss"           #where our .scss files are
images_dir = "../images"    #the folder with your images

# You can select your preferred output style here (can be overridden via the command line):
# output_style = :expanded # After dev :compressed
output_style = :compressed

# To disable debugging comments that display the original location of your selectors. Uncomment:
line_comments = false

# Obviously
preferred_syntax = :scss

我已经尝试在罗盘上运行第二次运行，只对单个文件（text-styles.scss）进行不同的编译，但我似乎无法在一个看似疯狂的文件上运行指南针。

Answer 1

我在本文中找到了解决方案......

Keeping Sass Folder Structure with Gulp/Compass

我设法通过使用初始gulp.src来获取特定文件，如下所示......

gulp.task('compass-text-styles', function () {
    return gulp.src(paths.scss + "text-styles.scss")
      .pipe(compass({
          config_file: paths.compassConfigText,
          css: paths.css,
          sass: paths.scss
      }))
      .pipe(gulp.dest(paths.css));
});

gulp.task("clean", ["clean:js", "clean:css"]);

gulp.task("build-debug", ["bundle:js", "compass-debug"]);

gulp.task("build", ["min:js", "compass-text-styles", "compass"]);

我之前尝试的错误是尝试将文件名应用于sass罗盘参数。

需要从SCSS生成1个带有注释的CSS文件 - Gulp，SCSS，Compass

1 个答案: