gulp关于scss的基础配置

最新推荐文章于 2024-09-11 07:31:39 发布

weixin_34032792

最新推荐文章于 2024-09-11 07:31:39 发布

阅读量197

点赞数

CC 4.0 BY-SA版权

原文链接：https://segmentfault.com/a/1190000005756479

本文介绍了一个使用Gulp实现的SCSS自动化编译流程，包括样式表的压缩、源码映射生成、浏览器前缀添加等功能，并集成了实时重载功能，方便开发者快速迭代样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

项目中用到的scss的配置，记录一下，谁叫咱脑袋不行呢

var gulp = require('gulp');
var plugins = require('gulp-load-plugins')();
var del = require('del');

var paths = {
    styles:['app/scss/**/*.scss'],
    outSytles:'app/css/',
    outSourcemaps:'app/css_sourcemaps',
    images: ['images/**','oa/images/**']
};
var reloadOptions= {
    port:8010,
    host:'localhost',
    basePath:'./app/',
    start:true,
    reloadPage:'oa/contacts.html'
};
gulp.task('scss',function(){

    return gulp.src(paths.styles)
        .pipe(plugins.changed(paths.outSytles))
        .pipe(plugins.sourcemaps.init())
        .pipe(plugins.sass({
            outputStyle: 'compressed'
        }))
        .on("error", plugins.notify.onError(function (error) {
            return "哎哟喂: " + error.message;
        }))
        .pipe(plugins.sourcemaps.write({includeContent: false}))
        .pipe(plugins.autoprefixer({
            browsers: ['>1%'],
            cascade: false,
            remove:false
        }))
        .pipe(plugins.sourcemaps.write())
        // .pipe(plugins.rename({suffix: '.min'}))
        .pipe(gulp.dest(paths.outSytles))
        .pipe(plugins.notify({
            title:'scss编译',
            message:'编译完成，没报错就成功...',
            onLast:true
        }))
        .pipe(plugins.livereload());
});

gulp.task('watch', function() {

    gulp.watch(['app/**']).on('change', plugins.livereload.changed);
    gulp.watch(paths.styles, ['scss']);
    plugins.livereload.listen(reloadOptions);
});

// 清除css文件夹
gulp.task("css_clear", function() {
    del([paths.outSytles + '/**','!weui.min.css'])
})

gulp.task('default',['watch','scss']);