Gulp task combine dependency styles with project styles

时间:2018-07-25 05:09:35

标签: gulp frontend dependency-management

My current gulp task is setup to compile & minify scss in a source directory to a public directory. I'd like the task to also pull styles from dependency plugins like jquery, lightbox, carousel, etc.

Current gulp looks something like this:

var config = {
    "sourceNodeLib": "./node_modules",
    paths: {
        source: {
            styles: './source/styles/**/*.scss'
        },
        dist: {
            styles: './public/styles'
        },
        patternLibrary: {
            styles: './pattern-library/assets/css'
        }
    },
    plugins: {
        "flexboxgrid": ["${sourceNodeLib}/flexboxgrid/src/css/flexboxgrid.css"]
    }
};
gulp.task('styles', function () {
    return gulp
        .src(config.paths.source.styles)
        .pipe(sourcemaps.init()) // Start source maps
        .pipe(sassGlob())
        .pipe(sass({outputStyle: 'compressed'}).on('error', onError))
        .pipe(autoprefixer({
            browsers: ['last 5 versions'],
            cascade: false,
                // flexbox: 'no-2009'
            }))
        .pipe(rename({ suffix: ".min" })) // Rename with '.min'
        .pipe(sourcemaps.write('/')) // Finish source maps
        .pipe(gulp.dest(config.paths.dist.styles)) // Add copy to public directory
        .pipe(gulp.dest(config.paths.patternLibrary.styles)) // Add copy to the pattern library
        .pipe(reload({ stream: true }))
    ;
});

0 个答案:

没有答案