gulp4以及与SASS的结合使用方法

记录gulp4 以及结合  sass 来编译和压缩css

一 .安装gulp

请直接参考gulp官网的安装方式

npm rm --global gulp

二 .创建 gulpfile.js

这个是使用gulp来创建任务的入口，如果要分开多个任务，可以创建一个index.js的入口

gulpfile.js 配置文件

var gulp = require('gulp'); //使用gulp时需要引入
var sass = require('gulp-sass'); // 编译scss 为 css
var browserSync = require('browser-sync').create();
var reload = browserSync.reload;
var concat = require('gulp-concat'); // 合并css
var cleanCss = require('gulp-clean-css'); // css压缩
const connect=require('gulp-connect'); //文件合并
const clean=require('gulp-clean'); //清除缓存

// 合并任务： 将css下的多个css文件合并输出到dist/css下面
gulp.task('concat', ()=>{
// gulp.src(['./src/css/index.css', './src/css/header.css']) //可以这样一个个的列出来
return gulp.src(['./src/css/*.css']) // 指定要合并的CSS文件 也可以直接指定 通配符
.pipe(concat('main.css')) //合并后的文件名称
.pipe(cleanCss()) //清除缓存
.pipe(gulp.dest('./dist/css')) //合并后的文件 生成的路径
.pipe(reload({stream: true}))
})

 

// 编译任务：sass文件夹下的sass文件编译为css文件存放在src/css下面

gulp.task('sass', ()=> {

    return gulp.src('./src/sass/*.scss')

            .pipe(sass())

            .pipe(gulp.dest('./src/css'))

            .pipe(reload({stream: true}))

})

//  监控文件变化

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

    gulp.watch('./src/sass/*.scss', gulp.series('sass','concat'))

});

//  启用动态监控    一定要注意，回调函数不能少，否则不执行后续的任务  

gulp.task('connect:app',function(cb){

    connect.server({

        root:'./src',//根目录

        // ip:'192.168.3.162', 默认localhost

        livereload:true,//自动更新

        port:9999//端口

    })

    cb();      //这个回调函数不能少

})

 

//  清除缓存，这里回调也不能少

gulp.task('clean:app', function(cb) {

    return gulp.src('./dist', {read: false})

        .pipe(clean());

        cb();

})

 

//  编译 SCSS到 CSS   并合并 

gulp.task('build',gulp.series("sass","concat"))

//启动任务connect:dist服务，生成打包文件后，监控其变化

gulp.task('server', gulp.series('connect:app', 'build', 'watchs')); 

　　

 

 

 

三   运行gulp

在 vs code 的终端中执行：gulp server 会发现 已经动态监控并实时生成main.css了

 

 

在HTML中，我们直接在页面上引用 main.css 就可以了

Demo 地址下载：https://files-cdn.cnblogs.com/files/freewsf/gulpwithsass.demo.rar