Javascript Gulp任务多个共享scss文件

在我当前的项目中，我有三个主要的.scss文件。它们中的每一个都会导入大量的部分文件，有时，一个部分文件会导入到两个或三个主文件中

例如：我有一个

main.scss

和一个

nl main.scss

文件

main.scss

导入部分

\u page.scss

和

\u post.scss

nl main.scss

导入

\u title.scss

和

\u 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' ] );

});

var gulp=require（'gulp'），
sass=需要（'gulp sass'），
autoprefixer=require（'gulp autoprefixer'），
minifycss=require（'gulp minify css'），
uglify=需要（'gulp uglify'），
rename=require（'gulp rename'），
清洁=需要（‘大口清洁’），
concat=require（'gulpconcat'），
管道工=需要（‘大口管道工’），
notify=需要（'gulp notify'），
projectTitle='项目名称'；
//样式任务
任务（'styles'，function（））{
返回gulp.src（'src/css/main.scss'）
.管子（管道工（））
.pipe（sass（{path:['src/css/']}））
.管道（通知（{
标题：projectTitle，
消息：“文件：已编译！”
} ) )
.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（重命名（{后缀：'.min'}））
.pipe（minifycss（））
.pipe（gulp.dest（'dist/assets/css'））
.管道（通知（{
标题：projectTitle，
消息：“缩小的文件：已创建/更新！”
} ) )
} );
//样式任务-未记录
gulp.task（'nl styles'，function（）{
返回gulp.src（'src/css/nl main.scss'）
.管子（管道工（））
.pipe（sass（{path:['src/css/']}））
.管道（通知（{
标题：projectTitle，
消息：“文件：已编译！”
} ) )
.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（重命名（{后缀：'.min'}））
.pipe（minifycss（））
.pipe（gulp.dest（'dist/assets/css'））
.管道（通知（{
标题：projectTitle，
消息：“缩小的文件：已创建/更新！”
} ) )
} );
//监视任务
吞咽任务（'watch'，function（）{
//监视.scss文件
gulp.watch（'src/css/***.scss'，['styles'，'nlstyles']）；
});

但是，当我运行

gulpwatch

时，只有

nl-styles

任务运行

我的问题是，让这项工作同时运行两个任务（或者如果没有修改共享部分，则只运行一个任务）的最佳方法是什么？有什么建议吗

---

谢谢

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

// 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!'
        } ) )
} );

//样式任务
任务（'styles'，function（））{
返回gulp.src（'src/css/*.scss'）
.管子（管道工（））
.pipe（sass（{path:['src/css/']}））
.管道（通知（{
标题：projectTitle，
消息：“文件：已编译！”
} ) )
.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（重命名（{后缀：'.min'}））
.pipe（minifycss（））
.pipe（gulp.dest（'dist/assets/css'））
.管道（通知（{
标题：projectTitle，
消息：“缩小的文件：已创建/更新！”
} ) )
} );

所有的scss文件都将被编译成css，你的gulpfile更清晰