gulp構建工具配置Less編譯

　　　　　　　　　　　　　　　　　　gulp構建工具配置Less編譯

 

gulp簡介

gulp是前端開發過程中對代碼進行自動化構建的利器，它不僅能對資源進行優化，而且在開發過程中能夠通過配置自動完成很多重復的任務，讓我們可以專注於代碼，提高工作效率。

 

使用場景：

1. 合並優化壓縮 css
2. 實時自動刷新
3. 壓縮靜態資源
4. 修改預處理樣式后自動編譯（SASS，Less）
5. 自動刷新瀏覽器
6. 資源文件 （圖片、css、js）壓縮
7. Autoprefixer
8. ESLint （檢查代碼質量）
9. rem移動端適配方案

 

😄如果要使用gulp 搭建less編譯需要進行一下步驟：

1. 全局安裝 gulp：

npm install --global gulp

2. 作為項目的開發依賴（devDependencies）安裝：

npm install --save-dev gulp

3.在項目根目錄下創建一個名為 gulpfile.js 的文件：

var gulp = require('gulp');

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

  // 將你的默認的任務代碼放在這

  console.log("gulp正在執行一些操作...")

});

 

4. 運行 gulp：

gulp 

當然以上就是一個非常簡單到安裝和運行gulp到過程，如果需要編譯less操作，還要繼續😂

---

5.在項目根目錄下打開git工具，先在本項目下本地安裝一個gulp -less

npm install gulp-less –save-dev

 

命令說明：–save-dev 該指令參數 ，將該包到信息保存到項目配置文件package.json 文件的開發環境依賴中。

6.安裝完了gulp-less 就可以開始配置gulpfile.js 文件了。

a.配置編譯一個文件：

var gulp = require('gulp');

    less = require('gulp-less');

​

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

    gulp.src('src/less/index.less')

        .pipe(less())

        .pipe(gulp.dest('dist/css'));

});

 

直接運行以下命令開始編譯

gulp Less

 

b.配置編譯多個文件:

var gulp = require('gulp');

    less = require('gulp-less');

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

    gulp.src(['src/less/index.less','src/less/detail.less']) //多個文件以數組形式傳入

        .pipe(less())

        .pipe(gulp.dest('dist/css')); //將會在src/css下生成index.css以及detail.css 

});

 

c.配置匹配符“!”，“”，“*”，“{}”

 

var gulp = require('gulp');

    less = require('gulp-less');

​

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

    //編譯src目錄下的所有less文件

    //除了reset.less和test.less（**匹配src/less的0個或多個子文件夾）

    gulp.src(['src/less/*.less', '!src/less/**/{reset,test}.less']) 

        .pipe(less())

        .pipe(gulp.dest('dist/css'));

});

 

7.完成以上到過程就已經可以開始通過Less 任務去編譯項目中使用的less文件了，如果需要壓縮css文件,還需要調用其它模塊來處理。

a.安裝 gulp-minify-css

npm install gulp-minify-css --save-dev

 

b.配置gulpfile.js文件（示例）

var gulp = require('gulp'),

    less = require('gulp-less'),

     //確保本地已安裝gulp-minify-css

    cssmin = require('gulp-minify-css');

​

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

    gulp.src('src/less/index.less')

        .pipe(less())

        .pipe(cssmin()) //兼容IE7及以下需設置compatibility屬性 .pipe(cssmin({compatibility: 'ie7'}))

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

});

 

c.當less有各種引入時，編譯后不容易找到對應less文件，所以需要生成sourcemap文件，方便修改

  npm install gulp-sourcemaps --save-dev

 

配置 gulpfile.js

var gulp = require('gulp'),

    less = require('gulp-less'),

    sourcemaps = require('gulp-sourcemaps');

​

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

    gulp.src('src/less/**/*.less')

        .pipe(sourcemaps.init())

        .pipe(less())

        .pipe(sourcemaps.write())

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

});

寫到這里基本上一個編譯less到gulp配置就已經完成了，你會在使用到時候非常頭疼，因為每一次修改都要去執行一次 gulp Less命令

 

那就再配置一個事件監聽需要編譯文件到變化，只要有文件更改就編譯。

var gulp = require('gulp'),

    less = require('gulp-less'),

    sourcemaps = require('gulp-sourcemaps');

​

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

    gulp.src('src/less/**/*.less')

        .pipe(sourcemaps.init())

        .pipe(less())

        .pipe(sourcemaps.write())

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

     gulp.watch('src/**/*.less', ['Less']); //當所有less文件發生改變時，調用Less任務

});

 

配置到此，只要開始運行一次gulp Less 命令，每次只要less文件有改動，自動就會實現編譯啦~~~😄