gulp下搭建sass及使用

gulp下如何搭建sass及使用

安裝（https://gulpjs.com/）

第一步安裝gulp腳本夾

npm install gulp-cli -gd

第二步初始化項目

npm init

初始化之後項目的目錄中就會多一個package.json文件

第三步安裝項目依賴文件包

npm install gulp -D

執行成功後文件夾中出現node_modules文件安裝成功

第四步若是沒有gulpfile.js文件本身手動在文件夾中建立一個

這是上面第二步到第四步執行命令後生成的文件

這是下面步驟的截圖

第五步咱們在命令行執行下載gulp-ruby-scss插件命令

npm install --save-dev gulp-ruby-scss

第六步咱們在命令行執行下載sass的命令

npm install --save-dev sass

第七步打開gulpfile.js文件將gulp-ruby-scss以下

//加載gulp模塊
const gulp = require('gulp');
//加載sass模塊
const sass = require('gulp-ruby-sass');
//定義任務

gulp.task('default', function() {
    console.log("壓縮");
});

//添加sass任務
gulp.task('sass111', function() { 
    return sass('./sass/*.scss')
    .pipe(gulp.dest('css'))
    .pipe(sass());
});
//執行實時監聽
gulp.task('dist',function(){
   gulp.watch('./sass/*.scss',['sass111']);// 監聽的文件
});

最後咱們須要執行這個實時監聽的任務，後面要帶上任務的名稱，由於默認訪問gulp任務

gulp dist