美文网首页
gulp打包sass成css

gulp打包sass成css

作者: 一缕清风一世情_百度 | 来源:发表于2020-09-25 14:08 被阅读0次
//gulp 4.0版本
const gulp = require('gulp');
// 添加MD5版本很高避免缓存
const cleanCSS = require('gulp-clean-css');
//sass 转 css
const sass = require('gulp-sass');
//重新命名文件或者文件夹
const rename = require('gulp-rename');
//浏览器兼容性自动补齐前缀
const autoprefixer = require('gulp-autoprefixer');
//css代码压缩
const uglifycss = require('gulp-uglifycss');
//删除文件或者文件夹
const del = require('del');

// 编译sass
gulp.task('css', () => {
    return gulp.src('../packages/theme-default/index.scss')
        .pipe(sass())
        .pipe(autoprefixer({
            browsers: ['last 2 versions', 'ie > 8']
        }))
        .pipe(cleanCSS())
        .pipe(uglifycss())
        .pipe(rename('monkey-ui.css'))
        .pipe(gulp.dest('../dist/styles'));
});

// 拷贝fonts
gulp.task('fonts', () => {
    return gulp.src('../packages/theme-default/fonts/*.*')
        .pipe(gulp.dest('../dist/styles/fonts'));
});


// 删除styles
gulp.task('clean', async (done) => {
    await del(['../dist/styles/**'], {
        force: true
    });
    done();
});

gulp.task('default', gulp.series('clean', 'css', 'fonts'));


相关文章

网友评论

      本文标题:gulp打包sass成css

      本文链接:https://www.haomeiwen.com/subject/hglfuktx.html