Question

我使用gulp并需要将所有.styl文件合并到1个主css文件而不导入main.styl。我怎么能做到的？我不喜欢很多css文件，我希望唯一一个:)谢谢，抱歉我的英文。

我的吞咽任务：

gulp.task('styl', function() {
  return gulp.src('src/helpers/styl/main.styl')
    .pipe(stylus())
    .pipe(autoprefixer({
      browsers: ['last 4 versions'],
      cascade: true
    }))
    .pipe(gulp.dest('src/css/'));
});

gulp.task('serve', ['styl'], function() {
  server.init({
    server: 'src',
    notify: true,
    open: true,
    cors: true,
    ui: false
  });
  gulp.watch('src/blocks/**/*.styl', ['styl']);
  gulp.watch('src/helpers/pug/*.pug', ['pug']).on('change', server.reload);
  gulp.watch('src/pages/*.pug', ['pug']).on('change', server.reload);
  gulp.watch('src/blocks/**/*.pug', ['pug']).on('change', server.reload);
  gulp.watch('src/css/main.css').on('change', server.reload);
  run(
    'pretty'
  );
});

导入的main.styl文件：

@import 'src/blocks/block/*'
@import 'src/helpers/block/*'

Answer 1

导入到main有什么问题？我认为批量导入可以解决您的问题。对于.scss文件，您可以使用https://www.npmjs.com/package/gulp-sass-bulk-import，但对于其他预处理器，您也可以找到一些内容。

Answer 2

尝试此更改，将src发送到您的

  gulp.task( 'concatCSS', function(){
        return gulp.src( [
            'css/bootstrap.min.css',        
            'css/animate.min.css',
            'css/styles.css',
            'css/responsive.css'
        ] )
        .pipe( concat( 'styles.css' ) )
        .pipe( gulp.dest( 'dist/css/' ) );
    } );

如何将许多样式文件（在不同的目录中）连接到一个css文件？

2 个答案: