安裝 node.js
首先需要安裝 node.js， 通常情況下，只需要到 Node.js 官網(wǎng)下載安裝包安裝就可以了。不過我可恥的失敗了，彈出了如下錯(cuò)誤：

于是我換成了 brew 大法:

brew install nodejs

安裝 Gulp

gulp 使用 Node.js 的 npm 命令安裝：

npm install --global gulp

然后在項(xiàng)目目錄中還要安裝一遍：

npm install --save-dev gulp

我對(duì)這步的操作比較費(fèi)解。以我多年碼農(nóng)經(jīng)驗(yàn)，即然全局安裝過了，應(yīng)該就可以在作何地方使用了。但 gulp 顯然不是這樣。如果不在項(xiàng)目目錄中執(zhí)行這一步，使用 gulp 命令時(shí)會(huì)提示以下錯(cuò)誤：

… Local gulp not found in …

… Try running: npm install gulp

最后在項(xiàng)目目錄中執(zhí)行一下 gulp 命令，如果輸出以下內(nèi)容，那就表示安裝好了：

… No gulpfile found

簡(jiǎn)單例子

下面展示使用 Gulp 構(gòu)建一個(gè)靜態(tài)網(wǎng)站開發(fā)服務(wù)端，并且支持實(shí)時(shí)刷新(livereload)功能。

首先需要安裝 livereload 的瀏覽器插件，插件地址：http://livereload.com/extensions/，支持 Chrome, Firefox, Safari 三大瀏覽器。插件安裝后，會(huì)在瀏覽器上出現(xiàn)一個(gè)按鈕，這個(gè)按鈕有兩個(gè)狀態(tài)，實(shí)心圓點(diǎn)表示插件已啟用，空心圓點(diǎn)表示插件未啟用。切記切記!

然后創(chuàng)建一個(gè)簡(jiǎn)單的項(xiàng)目結(jié)構(gòu):

./gulpfile.js
./public/
./public/index.html

使用以下命令安裝 gulp 和相關(guān)的組件:

npm install --save-dev gulp gulp-connect

gulp-connect 是 gulp 插件，提供了靜態(tài) web 服務(wù)端功能，并整合了 livereload 功能。

接下來需要編輯 gulpfile.js 文件，內(nèi)容如下:

var gulp = require('gulp'),
    connect = require('gulp-connect')

  gulp.task('server', function() {
    connect.server({
      root: 'public',
      livereload: true
    })
  })

  gulp.task('html', function() {
    gulp.src('./public/*.html').pipe(connect.reload())
  })

  gulp.task('watch', function() {
    gulp.watch(['./public/*.html'], ['html'])
  })

  gulp.task('default', ['watch', 'server'])

最后運(yùn)行這個(gè) web 服務(wù)器:

gulp
打開瀏覽器，訪問 http://localhost:4000。然后嘗試修改 index.html 文件的內(nèi)容后保存，正常情況下，瀏覽器端應(yīng)該會(huì)自動(dòng)刷新并顯示修改后的內(nèi)容。

Gulp與Grunt簡(jiǎn)單對(duì)比
讓我們來看個(gè)范例，分別在Gulp及Grunt建構(gòu)Sass：

Grunt:

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需要各別配置，指定其來源與目的路徑。例如，我們將一個(gè)檔案作為Sass的輸入，并儲(chǔ)存輸出結(jié)果。在設(shè)置Autoprefixer時(shí)，需要將Sass的輸出結(jié)果作為輸入，產(chǎn)生出一個(gè)新檔案。來看看在Gulp中同樣的配置：

Gulp:

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中我們只需要輸入一個(gè)檔案即可。經(jīng)過Sass處理，再傳到Autoprefixer，最終取得一個(gè)檔案。這樣的流程加快建構(gòu)過程，省去讀取及寫出不必要的檔案，只需要最終的一個(gè)檔案。

最新評(píng)論