Gulp 将不同的文件夹合并到一个 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 文件全局化。

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
        }));
});