Question

我知道GULP-SASS应该是轻而易举的，但如果我们能够使事情变得复杂，为什么不对？

好吧，我工作的项目似乎有一个特别的＆＃34;结构，我必须习惯它。就像这样：

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

在与app相同的级别上，我挥动子项目...让我们称之为web：

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

Gulp将不同的文件夹放入一个CSS文件中

1 个答案: