css - Gulp sass 不同的文件夹到一个 CSS 文件中

Question

我知道 GULP-SASS 应该简单易行，但如果我们可以使事情复杂化，为什么不呢？

好吧，我工作的元素似乎有一个“特殊”结构，我必须习惯它。它是这样的:

-static
  -app
    -components
      -component1
        -styles
          -component1.scss
      -component2
        -styles
          -component2.scss
    ...

在与应用程序相同的级别上，我挥动了一个子元素......让我们称之为网络:

-static
  -web
    -res
      -static
        -app
           -components
              -component3
                -style
                   -component3.scss   

现在到了有趣的部分:我如何才能从这些困惑中创建一个单一的 CSS 文件？我没有任何运气就试过了:

// Setting up the sass task
gulp.task('sass',  function (){
// Taking the path from the above object
    var sassApp = gulp.src(paths.styles.filesApp)
    // Sass options - make the output compressed and add the source map
    // Also pull the include path from the paths object
    .pipe(sass({
        outputStyle: 'compact', //compressed
        //sourceComments: 'map',
        includePaths : [paths.styles.srcApp]
    }))
    // If there is an error, don't stop compiling but use the custom displayError function
    .on('error', function(err){
        displayError(err);
    })
    // Pass the compiled sass through the prefixer with defined 
    .pipe(prefix(
        'last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'
    ))
    // Funally put the compiled sass into a css file
    .pipe(gulp.dest(paths.styles.dest));

    var sassWeb = gulp.src(paths.styles.filesWeb)
    // Sass options - make the output compressed and add the source map
    // Also pull the include path from the paths object
    .pipe(sass({
        outputStyle: 'compact',
        //sourceComments: 'map',
        includePaths : [paths.styles.srcWeb]
    }))
    // If there is an error, don't stop compiling but use the custom displayError function
    .on('error', function(err){
        displayError(err);
    })
    // Pass the compiled sass through the prefixer with defined
    .pipe(prefix(
        'last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'
    ))
    // Funally put the compiled sass into a css file
    .pipe(gulp.dest(paths.styles.dest));

    return
        gulpMerge(sassApp, sassWeb)
        .pipe(concat('all-css.css'))
        .pipe(gulp.dest(paths.styles.dest));
});

Answer 1

这就是我为 CSS 设置 gulp 文件的方式。

我在我的元素中使用了多个目的地，但这应该可以帮助您指明正确的方向。

您还可以使用 SassGlob 对主目录中的所有 scss/sass/css 文件进行 glob。

gulp.task('scss', function() {

    return gulp.src('src/sass/styles.scss')
        .pipe(plumber())
        .pipe(sourcemaps.init())
        .pipe(sassGlob())
        .pipe(sass({
            compass: false,
            includePaths: [
                './bower_components/susy/sass',
                './bower_components/susy/lib',
                './bower_components/susy/sass/susy',
                './bower_components/breakpoint-sass/stylesheets',
                require('node-bourbon').includePaths
            ],
            outputStyle: 'compressed'
        }).on('error', sass.logError))
        .pipe(prefix())
        .pipe(sourcemaps.write('./maps'))
        .pipe(gulp.dest('dist/assets/css'))
        .pipe(gulp.dest('assets/css'))
        .pipe(reload({
            stream: true
        }));
});