放入具有相同名称的不同文件。 GulpJS

时间:2016-06-15 20:02:46

标签: javascript css sass gulp

我有这个论坛即时通讯我确定你们现在知道,但我的问题是我需要'concurenctly'改变css文件到sass。这是我在项目中嘿嘿的例子:

app/
         components/
                                     404/
                                             controllers/
                                                         404Ctrl.js
                                             sass/
                                                       404.scss
                                             css/
                                                       404.min.css
                                    home/

                                             controllers/
                                                         homeCtrl.js
                                             sass/
                                                  home.scss
                                             css/
                                                  home.min.css
                                  etc... much more

因为你可以看到我有一个sass文件夹和css文件夹..我想要做的是,每当我更改我的scss文件时,我想将其缩小然后将其放入css文件中..但是我有很多组件,如404,家庭,authDesc等...我需要以某种方式当我输入gulp sass,我希望它为许多文件夹做..这是我到目前为止,但像我之前说的问题我需要知道把它放在哪个目的地..

这是我到目前为止所做的:

gulp.task('sass', function(done) {
  gulp.src('app/components/{COMPONENT_NAME}/sass/*.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest('assets/history/css'))
    .pipe(minifyCss({
      keepSpecialComments: 0
    }))
    .pipe(rename({ extname: '.min.css' }))
    .pipe(gulp.dest('app/components/{COMPONENT_NAME}/css'))
    .on('end', done);
});

但我需要使用所需的组件更改{COMONENT_NAME}。非常感谢帮助

修改

我发现了一种迷你技术,但这有一些错误:

var PATHS_SASS = {
    scss_org : [
        'app/components/404/sass/404.scss',
        'app/components/auth/sass/auth.scss'
    ],  
    css_dest : [
        'app/components/404/css',
        'app/components/auth/css'
    ]

}
gulp.task('sass', function() {
  for(var i=0; i<2; i++) {
        gulp.src(PATHS_SASS.scss_org[i])
        .pipe(sass().on('error', sass.logError))
        .pipe(gulp.dest('assets/history/css'))
        .pipe(minifyCss({
          keepSpecialComments: 0
        }))
        .pipe(rename({ extname: '.min.css' }))
        .pipe(gulp.dest(PATHS_SASS.css_dest[i]))
  }

});

1 个答案:

答案 0 :(得分:0)

添加一个main.scss文件,您可以在其中导入所有其他sass文件,然后只编译该文件。你应该在这个repo

中找到一个完美的代码示例