gulp教程之gulp-less

簡介：

使用gulp-less插件將less文件編譯成css，當有less文件發生改變自動編譯less，並保證less語法錯誤或出現異常時能正常工做並提示錯誤信息。

一、安裝nodejs/全局安裝gulp/項目安裝gulp/建立package.json和gulpfile.js文件

1.一、gulp基本使用還未掌握？請參看： gulp詳細入門教程

1.二、本示例目錄結構以下：

二、本地安裝gulp-less

2.一、github：https://github.com/plus3network/gulp-less

2.三、安裝：命令提示符執行 cnpm install gulp-less --save-dev

2.四、注意：沒有安裝cnpm請使用 npm install gulp-less --save-dev 什麼是cnpm，如何安裝？

2.五、說明：--save-dev 保存配置信息至 package.json 的 devDependencies 節點。爲何要保存至package.json？

三、配置gulpfile.js

3.一、基本使用

JavaScript

 

1 2 3 4 5 6 7 8

var gulp = require('gulp'),     less = require('gulp-less');   gulp.task('testLess', function () {     gulp.src('src/less/index.less')         .pipe(less())         .pipe(gulp.dest('src/css')); });

3.二、編譯多個less文件

JavaScript

 

1 2 3 4 5 6 7 8

var gulp = require('gulp'),     less = require('gulp-less');   gulp.task('testLess', function () {     gulp.src(['src/less/index.less','src/less/detail.less']) //多個文件以數組形式傳入         .pipe(less())         .pipe(gulp.dest('src/css')); //將會在src/css下生成index.css以及detail.css });

3.三、匹配符「!」，「*」，「**」，「{}」

JavaScript

 

1 2 3 4 5 6 7 8 9 10

var gulp = require('gulp'),     less = require('gulp-less');   gulp.task('testLess', 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('src/css')); });

3.四、調用多模塊（編譯less後壓縮css）

JavaScript

 

1 2 3 4 5 6 7 8 9 10 11

var gulp = require('gulp'),     less = require('gulp-less'),      //確保本地已安裝gulp-minify-css [cnpm install gulp-minify-css --save-dev]     cssmin = require('gulp-minify-css');   gulp.task('testLess', function () {     gulp.src('src/less/index.less')         .pipe(less())         .pipe(cssmin()) //兼容IE7及如下需設置compatibility屬性 .pipe(cssmin({compatibility: 'ie7'}))         .pipe(gulp.dest('src/css')); });

3.五、當less有各類引入關係時，編譯後不容易找到對應less文件，因此須要生成sourcemap文件，方便修改

JavaScript

 

1 2 3 4 5 6 7 8 9 10 11 12

var gulp = require('gulp'),     less = require('gulp-less'),      //確保本地已安裝gulp-sourcemaps [cnpm install gulp-sourcemaps --save-dev]     sourcemaps = require('gulp-sourcemaps');   gulp.task('testLess', function () {     gulp.src('src/less/**/*.less')         .pipe(sourcemaps.init())         .pipe(less())         .pipe(sourcemaps.write())         .pipe(gulp.dest('src/css')); });

四、執行任務

4.一、命令提示符執行：gulp testLess

五、監聽事件（自動編譯less）

5.一、若每修改一次less，就要手動執行任務，顯然是不合理的，因此當有less文件發生改變時使其自動編譯

JavaScript

 

1 2 3 4 5 6 7 8 9 10 11 12

var gulp = require('gulp'),     less = require('gulp-less');   gulp.task('testLess', function () {     gulp.src(['src/less/*.less','!src/less/extend/{reset,test}.less'])         .pipe(less())         .pipe(gulp.dest('src/css')); });   gulp.task('testWatch', function () {     gulp.watch('src/**/*.less', ['testLess']); //當全部less文件發生改變時，調用testLess任務 });

5.二、啓動監聽事件：命令提示符執行 gulp testWatch

5.三、注意：該命令提示符執行需處於打開狀態，關閉後監聽事件結束(Ctrl + C 或右上)

六、異常處理

6.一、當編譯less時出現語法錯誤或者其餘異常，會終止watch事件，一般須要查看命令提示符窗口才能知道，這並非咱們所但願的，因此咱們須要處理出現異常並不終止watch事件（gulp-plumber），並提示咱們出現了錯誤（gulp-notify）。

JavaScript

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

var gulp = require('gulp'),     less = require('gulp-less');     //當發生異常時提示錯誤 確保本地安裝gulp-notify和gulp-plumber     notify = require('gulp-notify'),     plumber = require('gulp-plumber');   gulp.task('testLess', function () {     gulp.src('src/less/*.less')         .pipe(plumber({errorHandler: notify.onError('Error: <%= error.message %>')}))         .pipe(less())         .pipe(gulp.dest('src/css')); }); gulp.task('testWatch', function () {     gulp.watch('src/**/*.less', ['testLess']); });

七、結束語

7.一、本文有任何錯誤，或有任何疑問，歡迎留言說明

 

來源：http://www.ydcss.com/archives/34