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
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