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

Question

我知道 GULP-SASS 应该是微不足道且容易的，但如果我们可以使事情复杂化，为什么不对呢？

好吧，我工作的项目似乎有一个 "particular" 结构，我必须习惯它。是这样的:

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

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

Gulp sass different folders into one CSS file

css

sass

gulp

gulp-sass