通过yarn add bootstrap安装后,得到的是带有js、sass(scss)源码已经dist的文件,如果想直接编译sass,得到sourcemaps,官方的Build tools方法过于庞大,加上简单项目用Gulp,所以进行重新配置下gulpfile.js

Bootstrap
Bootstrap

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;

文章版权归 鸽听网 所有,未经许可不得转载,责任编辑:小旭旭。

分享到: