Gulp入門教程

時間  2019-12-14
標籤 gulp 入門 教程 欄目 JavaScript 简体版
原文   原文鏈接

Gulp入門教程

 

前言

最近流行前端構建工具，苦於以前使用Grunt，代碼很難閱讀，如今出了Gulp，真是擺脫了痛苦。發現了一篇很好的Gulp英文教程，整理翻譯給你們看看。css

爲何使用Gulp

Gulp基於Node.js的前端構建工具，經過Gulp的插件能夠實現前端代碼的編譯（sass、less）、壓縮、測試；圖片的壓縮；瀏覽器自動刷新，還有許多強大的插件能夠在這裏查找。比起Grunt不只配置簡單並且更容易閱讀和維護，咱們能夠作一個對比：前端

Grunt:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
sass: {
dist: {
options: {
style: 'expanded'
},
files: {
'dist/assets/css/main.css': 'src/styles/main.scss',
}
}
},
autoprefixer: {
dist: {
options: {
browsers: [
'last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'
]
},
src: 'dist/assets/css/main.css',
dest: 'dist/assets/css/main.css'
}
},
grunt.registerTask( 'styles', ['sass', 'autoprefixer']);

在Grunt裏面，每一個插件使用的方式相對獨立，正如上面的代碼經過sass插件將main.sass文件編譯成main.css文件，接着autoprefixer插件再對編譯好的main.css文件進行修改，最後覆蓋main.css。那麼覆蓋文件就是多餘的了，有沒辦法作到sass和autoprefixer一併處理完再生成main.css？咱們來看看Gulp是如何作到的：android

Gulp：

1
2
3
4
5
6
gulp.task( 'sass', function() {
return gulp.src('src/styles/main.scss')
.pipe(sass({ style: 'compressed' }))
.pipe(autoprefixer( 'last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
.pipe(gulp.dest( 'dist/assets/css'))
});

使用Gulp咱們只須要放一個路徑，經過管道方式使用插件，最後生成文件，是否是有種jQuery的感受。這種方式不只提升效率並且一眼就看清了輸入文件和輸出文件，不再用看gruntfile看得眼花繚亂了。ios

再打個比喻，Grunt的插件就像獨立的工廠，這個工廠生成出來的產品打包封裝好後再送到另外一個工廠去加工，使用了Gulp後實現了工廠的合併，全部東西都在一個工廠裏完成了。如今是否對Gulp感興趣了，那就開始使用Gulp吧！git

安裝

首先咱們要全局安裝一遍：github

1
$ npm install gulp -g

接着咱們要進去到項目的根目錄再安裝一遍（確保你根目錄存在package.json文件）：正則表達式

1
$ npm install gulp --save-dev

—save-dev這個屬性會將條目保存到你package.json的devDependencies裏面npm

安裝Gulp插件

咱們將要使用Gulp插件來完成咱們如下任務：json

安裝這些插件須要運行以下命令：gulp

1
$ npm install gulp-ruby-sass gulp-autoprefixer gulp-minify-css gulp-jshint gulp-concat gulp-uglify gulp-imagemin gulp-notify gulp-rename gulp-livereload gulp-cache del --save-dev

上面是一些經常使用的插件，若是想要找更多的插件點擊這裏

加載插件

接着咱們要建立一個gulpfile.js在根目錄下，而後在裏面加載插件：

1
2
3
4
5
6
7
8
9
10
11
12
13
var gulp = require('gulp'),
sass = require('gulp-ruby-sass'),
autoprefixer = require('gulp-autoprefixer'),
minifycss = require('gulp-minify-css'),
jshint = require('gulp-jshint'),
uglify = require('gulp-uglify'),
imagemin = require('gulp-imagemin'),
rename = require('gulp-rename'),
concat = require('gulp-concat'),
notify = require('gulp-notify'),
cache = require('gulp-cache'),
livereload = require('gulp-livereload'),
del = require('del');

Gulp的插件和Grunt有些許不同，Grunt插件是爲了更好的完成一項任務。就像Grunt的imagemin插件就利用了緩存來避免重複壓縮，而Gulp要利用gulp-cache來完成，固然啦，不只限定於緩存圖片。

創建任務

編譯sass、自動添加css前綴和壓縮

首先咱們編譯sass，添加前綴，保存到咱們指定的目錄下面，還沒結束，咱們還要壓縮，給文件添加.min後綴再輸出壓縮文件到指定目錄，最後提醒任務完成了：

1
2
3
4
5
6
7
8
9
10
gulp.task( 'styles', function() {
return gulp.src('src/styles/main.scss')
.pipe(sass({ style: 'expanded' }))
.pipe(autoprefixer( 'last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
.pipe(gulp.dest( 'dist/assets/css'))
.pipe(rename({suffix: '.min'}))
.pipe(minifycss())
.pipe(gulp.dest( 'dist/assets/css'))
.pipe(notify({ message: 'Styles task complete' }));
});

讓我解釋一下：

1
gulp.task( 'styles', function () {...});

gulp.task這個API用來建立任務，在命令行下能夠輸入$ gulp styles來執行上面的任務。

1
return gulp.src('src/styles/main.scss')

gulp.src這個API設置須要處理的文件的路徑，能夠是多個文件以數組的形式[main.scss, vender.scss]，也能夠是正則表達式/**/*.scss。

1
.pipe(sass({ style: 'expanded' }))

咱們使用.pipe()這個API將須要處理的文件導向sass插件，那些插件的用法能夠在github上找到，爲了方便你們查找我已經在上面列出來了。

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

gulp.dest()API設置生成文件的路徑，一個任務能夠有多個生成路徑，一個能夠輸出未壓縮的版本，另外一個能夠輸出壓縮後的版本。

爲了更好的瞭解Gulp API，強烈建議看一下Gulp API文檔，其實Gulp API就這麼幾個，沒什麼好可怕的。

js代碼校驗、合併和壓縮

但願你們已經知道如何去建立一個任務了，接下來咱們完成scripts的校驗、合併和壓縮的任務吧：

1
2
3
4
5
6
7
8
9
10
11
gulp.task( 'scripts', function() {
return gulp.src('src/scripts/**/*.js')
.pipe(jshint( '.jshintrc'))
.pipe(jshint.reporter( 'default'))
.pipe(concat( 'main.js'))
.pipe(gulp.dest( 'dist/assets/js'))
.pipe(rename({suffix: '.min'}))
.pipe(uglify())
.pipe(gulp.dest( 'dist/assets/js'))
.pipe(notify({ message: 'Scripts task complete' }));
});

須要提醒的是咱們要設置JSHint的reporter方式，上面使用的是default默認的，瞭解更多點擊這裏。

壓縮圖片

1
2
3
4
5
6
gulp.task( 'images', function() {
return gulp.src('src/images/**/*')
.pipe(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true }))
.pipe(gulp.dest( 'dist/assets/img'))
.pipe(notify({ message: 'Images task complete' }));
});

這個任務使用imagemin插件把全部在src/images/目錄以及其子目錄下的全部圖片（文件）進行壓縮，咱們能夠進一步優化，利用緩存保存已經壓縮過的圖片，使用以前裝過的gulp-cache插件，不過要修改一下上面的代碼：

將這行代碼:

1
.pipe(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true }))

修改爲:

1
.pipe(cache(imagemin({ optimizationLevel: 5, progressive: true, interlaced: true })))

如今，只有新建或者修改過的圖片纔會被壓縮了。

清除文件

在任務執行前，最好先清除以前生成的文件：

1
2
3
gulp.task( 'clean', function(cb) {
del([ 'dist/assets/css', 'dist/assets/js', 'dist/assets/img'], cb)
});

在這裏沒有必要使用Gulp插件了，可使用NPM提供的插件。咱們用一個回調函數（cb）確保在退出前完成任務。

設置默認任務（default）

咱們在命令行下輸入$ gulp執行的就是默認任務，如今咱們爲默認任務指定執行上面寫好的三個任務：

1
2
3
gulp.task( 'default', ['clean'], function() {
gulp.start( 'styles', 'scripts', 'images');
});

在這個例子裏面，clean任務執行完成了纔會去運行其餘的任務，在gulp.start()裏的任務執行的順序是不肯定的，因此將要在它們以前執行的任務寫在數組裏面。

監聽文件

爲了監聽文件的是否修改以便執行相應的任務，咱們須要建立一個新的任務，而後利用gulp.watchAPI實現：

1
2
3
4
5
6
7
8
gulp.task( 'watch', function() {
// Watch .scss files
gulp.watch( 'src/styles/**/*.scss', ['styles']);
// Watch .js files
gulp.watch( 'src/scripts/**/*.js', ['scripts']);
// Watch image files
gulp.watch( 'src/images/**/*', ['images']);
});

咱們將不一樣類型的文件分開處理，執行對應的數組裏的任務。如今咱們能夠在命令行輸入$ gulp watch執行監放任務，當.sass、.js和圖片修改時將執行對應的任務。

自動刷新頁面

Gulp也能夠實現當文件修改時自動刷新頁面，咱們要修改watch任務，配置LiveReload：

1
2
3
4
5
6
gulp.task( 'watch', function() {
// Create LiveReload server
livereload.listen();
// Watch any files in dist/, reload on change
gulp.watch([ 'dist/**']).on('change', livereload.changed);
});

要使這個可以工做，還須要在瀏覽器上安裝LiveReload插件，除此以外還能這樣作

全部任務放一塊兒

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
/*!
* gulp
* $ npm install gulp-ruby-sass gulp-autoprefixer gulp-minify-css gulp-jshint gulp-concat gulp-uglify gulp-imagemin gulp-notify gulp-rename gulp-livereload gulp-cache del --save-dev
*/
// Load plugins
var gulp = require('gulp'),
sass = require('gulp-ruby-sass'),
autoprefixer = require('gulp-autoprefixer'),
minifycss = require('gulp-minify-css'),
jshint = require('gulp-jshint'),
uglify = require('gulp-uglify'),
imagemin = require('gulp-imagemin'),
rename = require('gulp-rename'),
concat = require('gulp-concat'),
notify = require('gulp-notify'),
cache = require('gulp-cache'),
livereload = require('gulp-livereload'),
del = require('del');
// Styles
gulp.task( 'styles', function() {
return gulp.src('src/styles/main.scss')
.pipe(sass({ style: 'expanded', }))
.pipe(autoprefixer( 'last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
.pipe(gulp.dest( 'dist/styles'))
.pipe(rename({ suffix: '.min' }))
.pipe(minifycss())
.pipe(gulp.dest( 'dist/styles'))
.pipe(notify({ message: 'Styles task complete' }));
});
// Scripts
gulp.task( 'scripts', function() {
return gulp.src('src/scripts/**/*.js')
.pipe(jshint( '.jshintrc'))
.pipe(jshint.reporter( 'default'))
.pipe(concat( 'main.js'))
.pipe(gulp.dest( 'dist/scripts'))
.pipe(rename({ suffix: '.min' }))
.pipe(uglify())
.pipe(gulp.dest( 'dist/scripts'))
.pipe(notify({ message: 'Scripts task complete' }));
});
// Images
gulp.task( 'images', function() {
return gulp.src('src/images/**/*')
.pipe(cache(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true })))
.pipe(gulp.dest( 'dist/images'))
.pipe(notify({ message: 'Images task complete' }));
});
// Clean
gulp.task( 'clean', function(cb) {
del([ 'dist/assets/css', 'dist/assets/js', 'dist/assets/img'], cb)
});
// Default task
gulp.task( 'default', ['clean'], function() {
gulp.start( 'styles', 'scripts', 'images');
});
// Watch
gulp.task( 'watch', function() {
// Watch .scss files
gulp.watch( 'src/styles/**/*.scss', ['styles']);
// Watch .js files
gulp.watch( 'src/scripts/**/*.js', ['scripts']);
// Watch image files
gulp.watch( 'src/images/**/*', ['images']);
// Create LiveReload server
livereload.listen();
// Watch any files in dist/, reload on change
gulp.watch([ 'dist/**']).on('change', livereload.changed);
});

在gist上有源碼，而且附上Grunt的實現做爲對比。

參考連接：http://markgoodyear.com/2014/01/getting-started-with-gulp/

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程