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

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

Gulp编译多个scss / js文件

2 个答案: