Gulp编译多个scss / js文件

这是我第一次使用Gulp，对于我做错了什么，我有点困惑，我的结构是这样的：

assets
   -> resources
   -> dist
      -> main.css
   -> src
      -> scss/bootstrap
      -> scss/main.scss

      -> js/bootstrap
      -> js/main.js

我的目标是创建一个gulp文件，该文件将同时编译我的JavaScript和SCSS并将它们输出到/ dist中的“ main.css”和“ main.js”中。

console.log('Starting compiling process...');

const gulp = require('gulp');
const jsmn = require('gulp-uglify');
const sass = require('gulp-sass');

let src         = './resources/src';
let dist        = './resources/dist';
let bootstrap   = './node_modules/bootstrap';
let custom      = './resources/src/scss';

//Configure options
let scss = {
    in: [src + 'scss/*'],
    out: dist,
    watch: src + '/scss/*',
    watchjs: src + '/js/*.js',
    sassOps: {
        outputStyle: 'compressed',
        precision: 3,
        errLogToConsole: true,
        includePaths: [bootstrap + '/scss']
    }
};

//Default task
gulp.task('compile', function() {
    return gulp.src(scss.in)
        .pipe(sass(scss.sassOps))
        .pipe(gulp.dest(scss.out));
});

gulp.task('compress', function() {
    return gulp.src([src + '/js/*.js'])
        .pipe(jsmn())
        .pipe(gulp.dest(dist));
});

gulp.task('watch', function() {
    gulp.watch([scss.watchjs, scss.watch], gulp.parallel('compile', 'compress'));
});

现在，尽管SCSS是一个问题，它仍可以编译我的Javascript ...

如果您有多个SCSS / JS文件，则需要使用gulp concat将所有文件合并为一个文件。

这是我用来从多个SCSS文件生成CSS文件的方式

// styles
gulp.task('styles', function() {
    gulp.src('sass/**/*.scss')
        .pipe(sass({
            outputStyle: 'compressed'
        }).on('error', sass.logError))
        .pipe(autoprefixer({
            browsers: ['last 2 versions']
        }))
        .pipe(concat('app.css'))
        .pipe(gulp.dest('dist/css'))
        .pipe(browserSync.stream());
});

我也建议也使用Gulp Autoprefixer