Visual Studio 2017中使用gulp編譯sass/scss

在Visual Studio 2017中使用gulp編譯sass/scss文件

需要的環境：Visual Studio 2017、Node.js、npm

在vs2017中 【視圖】-【其他窗口】-【任務運行程序資源管理器】打開。

 

在學習的時候，發生網上講的大多都是的gulpfile.js里面的核心內容，因此我這里寫下我的詳細操作步驟留作筆記。

步驟：

1、運行：cmd

2、運行：cd 到項目的根目錄

3、運行：npm init 初始化package.json （一直Enter到底，也可以按照提示填寫你想要的初始化信息，也可以enter到底后手動修改）

4、運行：npm install --save-dev [包名]   簡寫：npm i -D [包名] 安裝以下package.json中“devDependencies”的包

 package.json文件內容（完整）：（可以復制該內容到你項目下的package.json中；

　　a、重新在vs2017中打開項目解決方案，vs2017會自動運行命令，進行包的安裝。可在：【視圖】-【輸出】-顯示輸出來源：Bower/npm中查看自動安裝結果。

　　b、也可以在根目錄下運行：npm install 命令安裝。）

{
  "name": "test1",
  "version": "1.0.0",
  "description": "test1",
  "main": "gulpfile.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "gulp": "^4.0.0",
    "gulp-clean-css": "^4.0.0",
    "gulp-sass": "^4.0.2"
  }
}

 5、手動創建名為“gulpfile.js”的文件

 gulpfile.js 文件內容：

var { src, dest, task, series, watch, parallel } = require('gulp');
var sass = require("gulp-sass");
var cleanCss = require('gulp-clean-css');

// Gup API：https://gulpjs.com/docs/en/api/task
// 運行任務：在VS2017 [視圖]-[其他窗口]-[任務運行程序資源管理器] 中查看，雙擊運行（右鍵菜單-運行）
// 如果有錯誤，在[視圖] - [輸出] - 顯示輸出來源：任務運行程序資源管理器 中查看

// 任務 sass：編譯css文件夾下單個.scss文件
task("sass-test", function () {
    return src('sass/test.scss')
        .pipe(sass())
        .pipe(cleanCss()) //.pipe(cleanCss({ level: 2 })) // 編譯結果不一樣，合並相同的樣式
        .pipe(dest('css'));
});

// 任務 sass：編譯css文件夾下單個.scss文件
task("sass-test2", function () {
    return src('sass/test2.scss')
        .pipe(sass())
        .pipe(cleanCss())
        .pipe(dest('css'));
});

// 任務 sass：編譯css文件夾下所有.scss文件
task("sass", function () {
    return src('sass/*.scss')
        .pipe(sass())
        .pipe(cleanCss())
        .pipe(dest('css'));
});

// 任務 watch:sass：監聽目錄下所有sass文件，單個觸發編譯
task('watch:sass', function () {
    const watcher = watch('sass/*.scss');
    // 事件：'add', 'addDir', 'change', 'unlink', 'unlinkDir', 'ready', 'error', or 'all'全部事件
    watcher.on('all', function (event, path) {
        path = path.replace(/\\/g, '/');
        src(path)
            .pipe(sass())
            .pipe(cleanCss())
            .pipe(dest('css'));
        console.log('['+(new Date()).toTimeString().substr(0, 8)+'] '+event+' \033[40;36m' + path);
    });
});

// 一個任務啟動多個任務 series 依次執行 parallel 是並發執行
task('sass-all', series('sass-test', 'sass-test2'));

 6、在vs2017中 【視圖】-【其他窗口】-【任務運行程序資源管理器】中 選擇項目-刷新任務-雙擊運行。

 

附上實例地址：https://gitee.com/zymlml/gulp-sass-test