通过yarn add bootstrap
安装后,得到的是带有js、sass(scss)源码已经dist的文件,如果想直接编译sass,得到sourcemaps,官方的Build tools方法过于庞大,加上简单项目用Gulp,所以进行重新配置下gulpfile.js
。
var gulp = require('gulp');
var sass = require('gulp-sass');
var rename = require('gulp-rename');
var postcss = require('gulp-postcss');
var sourcemaps = require('gulp-sourcemaps')
var autoprefixer = require('autoprefixer');
var changed = require('gulp-changed');
var paths = {
styles: {
src: 'src/scss/**/*.scss',
dest: 'dist/css/'
},
};
/*
* Define our tasks using plain functions
*/
function styles() {
var plugins = [
autoprefixer(),
];
return gulp.src(paths.styles.src)
.pipe(changed(paths.styles.dest))
.pipe(sourcemaps.init())
.pipe(sass().on('error', sass.logError))
.pipe(postcss(plugins))
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest(paths.styles.dest));
}
function minCSS() {
var plugins = [
autoprefixer(),
];
return gulp.src(paths.styles.src)
.pipe(changed(paths.styles.dest))
.pipe(sourcemaps.init())
.pipe(sass({ outputStyle: 'compressed' }).on('error', sass.logError))
.pipe(postcss(plugins))
.pipe(rename({
suffix: '.min'
}))
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest(paths.styles.dest));
}
function watch() {
gulp.watch(paths.styles.src, styles);
gulp.watch(paths.styles.src, minCSS);
}
/*
* Specify if tasks run in series or parallel using `gulp.series` and `gulp.parallel`
*/
var build = gulp.series(gulp.parallel(styles, minCSS, watch));
/*
* You can use CommonJS `exports` module notation to declare tasks
*/
exports.styles = styles;
exports.minCSS = minCSS;
exports.watch = watch;
exports.build = build;
/*
* Define default task that can be called by just running `gulp` from cli
*/
exports.default = build;