Gulp编译多个scss / js文件

Question

这是我第一次使用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 ...

Answer 1

如果您有多个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

Answer 2

Gulp任务来编译您的scss，添加浏览器前缀，替换源文件中使用的url并将其输出到/ dist中的“ main.css”中。

/* ------------------------------------
Process CSS
------------------------------------ */
gulp.task('processCss', function () {
    return gulp.src('scss/*.scss')
        .pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
        .pipe(autoprefixer({
            browsers: ['last 2 versions'],
            cascade: false
        }))
        .pipe(rename('main.css')) // will be prefixed and minified
        .pipe(replace('url("../../', 'url("../'))
        .pipe(stripCssComments({preserve: false}))
        .pipe(gulp.dest('dist'));
});

并且此任务是编译您的js文件，最小化并将它们输出到/ dist中的“ main.js”。

gulp.task('processFooterJs', function () {
    return gulp.src('js/*.js')
        .pipe(concat('main.js'))
        .pipe(uglify())   // will be compressed
        .pipe(gulp.dest('dist'));
});

请使用npm安装这些依赖项

gulp-autoprefixer
gulp-concat
gulp-strip-css-comments
gulp-uglify
gulp-rename
gulp-replace

并像这样将它们导入文件的顶部：

    var autoprefixer = require('gulp-autoprefixer'),
        concat = require('gulp-concat'),
        stripCssComments = require('gulp-strip-css-comments'),
        uglify = require('gulp-uglify'),
        rename = require('gulp-rename'),
        replace = require('gulp-replace');

它将完成：）

如果您的js文件有多个来源，例如您需要从节点模块导入jquery.js和从js文件夹导入index.js，您的任务将像这样：

/* ------------------------------------
Process JS for footer
------------------------------------ */
gulp.task('processFooterJs', function () {
    return gulp.src([    ,
        'node_modules/jquery/dist/jquery.min.js',
        'js/index.js',
    ])
      .pipe(concat('main.js'))
        .pipe(uglify())  
        .pipe(gulp.dest('dist'));
});

我希望这会对您有帮助，最好的祝福：）