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