在Mac OS上安裝使用Node.js的項目自動化構建工具Gulp_node.js

來源:互聯網
上載者:User

安裝 node.js
首先需要安裝 node.js, 通常情況下,只需要到 Node.js 官網下載安裝包安裝就可以了。不過我可恥的失敗了,彈出了如下錯誤:

於是我換成了 brew 大法:

brew install nodejs

安裝 Gulp

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

npm install --global gulp

然後在項目目錄中還要安裝一遍:

npm install --save-dev gulp

我對這步的操作比較費解。以我多年碼農經驗,即然全域安裝過了,應該就可以在作何地方使用了。但 gulp 顯然不是這樣。如果不在項目目錄中執行這一步,使用 gulp 命令時會提示以下錯誤:

… Local gulp not found in …

… Try running: npm install gulp

最後在項目目錄中執行一下 gulp 命令,如果輸出以下內容,那就表示安裝好了:

… No gulpfile found

簡單例子

下面展示使用 Gulp 構建一個靜態網站開發服務端,並且支援即時重新整理(livereload)功能。

首先需要安裝 livereload 的瀏覽器外掛程式,外掛程式地址:http://livereload.com/extensions/,支援 Chrome, Firefox, Safari 三大瀏覽器。外掛程式安裝後,會在瀏覽器上出現一個按鈕,這個按鈕有兩個狀態,實心圓點表示外掛程式已啟用,空心圓點表示外掛程式未啟用。切記切記!

然後建立一個簡單的項目結構:

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

使用以下命令安裝 gulp 和相關的組件:

npm install --save-dev gulp gulp-connect

gulp-connect 是 gulp 外掛程式,提供了靜態 web 服務端功能,並整合了 livereload 功能。

接下來需要編輯 gulpfile.js 檔案,內容如下:

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'])

最後運行這個 網頁伺服器:

gulp
開啟瀏覽器,訪問 http://localhost:4000。然後嘗試修改 index.html 檔案的內容後儲存,正常情況下,瀏覽器端應該會自動重新整理並顯示修改後的內容。


Gulp與Grunt簡單對比
讓我們來看個範例,分別在Gulp及Grunt建構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需要各別配置外掛,指定其來源與目的路徑。例如,我們將一個檔案作為外掛Sass的輸入,並儲存輸出結果。在設定Autoprefixer時,需要將Sass的輸出結果作為輸入,產生出一個新檔案。來看看在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中我們只需要輸入一個檔案即可。經過外掛Sass處理,再傳到外掛Autoprefixer,最終取得一個檔案。這樣的流程加快建構過程,省去讀取及寫出不必要的檔案,只需要最終的一個檔案。

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.