gulp學習筆記3

gulp系列學習筆記：

1、gulp學習筆記1

2、gulp學習筆記2

3、gulp學習筆記3

4、gulp學習筆記4

?

1、編譯sass

Sass 是一種 CSS 的開發工具，提供了許多便利的寫法，大大節省了開發者的時間，使得 CSS 的開發，變得簡單和可維護。

安裝相應的模塊：

npm install gulp-ruby-sass

在 gulpfile.js 文件編寫如下代碼：

/ 獲取 gulp
var gulp = require('gulp')
// 獲取 gulp-ruby-sass 模塊
var sass = require('gulp-ruby-sass')// 編譯sass
// 在命令行輸入 gulp sass 啟動此任務
gulp.task('sass', function() {return sass('sass/') .on('error', function (err) {console.error('Error!', err.message);}).pipe(gulp.dest('dist/css'))
});

此時在命令行輸入：

gulp sass

將sass文件夾下的.sass文件編譯放到dist/css文件夾下。

?

2、檢查js代碼

JSHint（http://www.jshint.com/）是一個JavaScript語法和風格檢查工具，你可以用它來提醒代碼風格相關的問題。

同樣的，我們也需要相應的代碼：

npm install gulp-jshint --save-dev

然后我們在配置文件編寫相對應的代碼：

// 包含gulp
var gulp = require('gulp'); // 包含gulp-jshint插件
var jshint = require('gulp-jshint');// jshint 任務建立
gulp.task('jshint', function() {gulp.src('./src/scripts/*.js').pipe(jshint()).pipe(jshint.reporter('default'));
});

此時在命令行輸入：

gulp jshint

你會看到如下輸出：

[gulp] Using file D:\test\gulpfile.js
[gulp] Working directory changed to D:\test
[gulp] Running 'jshint'...
[gulp] Finished 'jshint' in 8.24 ms
D:\test\src\scripts\lib.js: line 2, col 20, Missing semicolon.1 error

這里顯示lib.js的文件有個錯誤。然后你照著修改就可以了。

3、壓縮html

為了節省流量和提高頁面的加載速度，同樣的，我們可以對html也進行壓縮。

安裝相應的模塊：

npm install gulp-minify-html --save-dev

在 gulpfile.js 文件編寫如下代碼：

// 包含插件
var minifyHTML = require('gulp-minify-html');// minify new or changed HTML pages
gulp.task('htmlpage', function() {gulp.src('./src/*.html').pipe(minifyHTML()).pipe(gulp.dest('./dist'));
});

此時在命令行輸入：

gulp htmlpage

將src文件夾下的.html文件編譯放到dist文件夾下。

3、

4、只編譯修改的文件

在前面的那些任務當中，當你只修改其中一個文件的話，其實所有的文件都會被重新編譯一次。當編譯的文件比較多的時候，所需要的時間就會大大增加。這時候，我們就要用到一個新的插件 gulp-changed.

安裝插件：

npm install --save-dev gulp-changed

這里借用前面的圖片壓縮來說明，編寫代碼：

var changed = require('gulp-changed');
var imagemin = require('gulp-imagemin');// 壓縮新圖片
gulp.task('imagemin', function() {var imgSrc = './src/images/**/*',imgDst = './dist/images';gulp.src(imgSrc)//  發現有新圖片
    .pipe(changed(imgDst))// 壓縮
    .pipe(imagemin())// 保存
    .pipe(gulp.dest(imgDst));
});

此時在命令行輸入：

gulp imagemin

將src/images文件夾下的圖片壓縮到dist/images文件夾下。

?

?

文章參考了以下資料：

1、gulp詳細入門教程: ?http://www.ydcss.com/archives/18; ?

2、gulp API 文檔: ?http://www.gulpjs.com.cn/docs/api/; ?

3、gulp 入門指南: ?https://github.com/huanshen/gulp-book;?

4、An Introduction to Gulp.js:? https://www.sitepoint.com/introduction-gulp-js/