Question

在我目前的项目中，我有三个主要的.scss文件。他们每个人都导入了很多部分文件，有时，部分文件会被导入两个或三个主文件中。

例如：我有一个main.scss和一个nl-main.scss个文件。 main.scss导入部分_page.scss和_post.scss。 nl-main.scss导入_title.scss和_post.scss。这是我当前的文件夹结构：

css
   modules
      _page.scss
      _post.scss
      _title.scss
   main.scss
   nl-main.scss

这是我目前的gulpfile.js设置：

var gulp = require( 'gulp' ),
        sass = require( 'gulp-sass' ),
        autoprefixer = require( 'gulp-autoprefixer' ),
        minifycss = require( 'gulp-minify-css' ),
        uglify = require( 'gulp-uglify' ),
        rename = require( 'gulp-rename' ),
        clean = require( 'gulp-clean' ),
        concat = require( 'gulp-concat' ),
        plumber = require( 'gulp-plumber' ),
        notify = require( 'gulp-notify' ),
        projectTitle = 'Project Name';

// styles task
gulp.task( 'styles', function() {
    return gulp.src( 'src/css/main.scss' )
        .pipe( plumber() )
        .pipe( sass({ paths: ['src/css/'] }) )
        .pipe( notify( {
        title: projectTitle,
        message: 'File: <%= file.relative %> was compiled!'
        } ) )
        .pipe( autoprefixer( 'last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4' ) )
        .pipe( gulp.dest( 'dist/assets/css' ) )
        .pipe( rename( { suffix: '.min' } ) )
        .pipe( minifycss() )
        .pipe( gulp.dest( 'dist/assets/css' ) )
        .pipe( notify( {
        title: projectTitle,
        message: 'Minified file: <%= file.relative %> was created / updated!'
        } ) )
} );

// styles task - not logged
gulp.task( 'nl-styles', function() {
    return gulp.src( 'src/css/nl-main.scss' )
        .pipe( plumber() )
        .pipe( sass({ paths: ['src/css/'] }) )
        .pipe( notify( {
        title: projectTitle,
        message: 'File: <%= file.relative %> was compiled!'
        } ) )
        .pipe( autoprefixer( 'last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4' ) )
        .pipe( gulp.dest( 'dist/assets/css' ) )
        .pipe( rename( { suffix: '.min' } ) )
        .pipe( minifycss() )
        .pipe( gulp.dest( 'dist/assets/css' ) )
        .pipe( notify( {
        title: projectTitle,
        message: 'Minified file: <%= file.relative %> was created / updated!'
        } ) )
} );

// watch task
gulp.task( 'watch', function() {

    // Watch .scss files
    gulp.watch( 'src/css/**/*.scss', [ 'styles', 'nl-styles' ] );

});

但是，当我运行gulp watch时，只运行nl-styles任务。

我的问题是什么是使这项工作最好的方法并运行任务（或者只有一项任务，如果没有修改共享部分）？关于这个的任何提示？

谢谢！

Answer 1

这可能是并行任务的问题。那你为什么不只用一项任务呢？试试这个：

// styles task
gulp.task( 'styles', function() {
    return gulp.src( 'src/css/*.scss' )
        .pipe( plumber() )
        .pipe( sass({ paths: ['src/css/'] }) )
        .pipe( notify( {
        title: projectTitle,
            message: 'File: <%= file.relative %> was compiled!'
        } ) )
        .pipe( autoprefixer( 'last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4' ) )
        .pipe( gulp.dest( 'dist/assets/css' ) )
        .pipe( rename( { suffix: '.min' } ) )
        .pipe( minifycss() )
        .pipe( gulp.dest( 'dist/assets/css' ) )
        .pipe( notify( {
        title: projectTitle,
        message: 'Minified file: <%= file.relative %> was created / updated!'
        } ) )
} );

所有scss文件都将被编译为css，你的gulpfile会更加清晰。

Gulp任务多个共享scss文件

1 个答案: