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

现在它可以编译我的 Javascript，虽然 SCSS 是个问题...

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

我希望这可以帮助你，祝你好运:)