Bootstrap gulpfile.js SASS to CSS with sourcemaps

通过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;
本条目发布于。属于科技分类,被贴了 标签。作者是

关于有个狸

2005年开始的一名站长,从事网站策划、运营,早期一批扎根阿里妈妈、Google Adsense的一员,目前司职前端与产品设计。

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注