有的人說，grunt已經廉頗老矣，尚能飯否。gulp已經成為了未來的趨勢，或許將撼動grunt的地位。

那么就得看看gulp到底優勢在哪里，在我最近的使用中發現，我的到了一個結論：“grunt廉頗老矣...”。

gulp是基于流的自動化構建工具，有以下幾項優點：

易于使用：

通過代碼優于配置的策略，Gulp 讓簡單的任務簡單，復雜的任務可管理。

構建快速：

利用 Node.js 流的威力，你可以快速構建項目并減少頻繁的 IO 操作。

插件高質：

Gulp 嚴格的插件指南確保插件如你期望的那樣簡潔高質得工作。

易于學習：

通過最少的 API，掌握 Gulp 毫不費力，構建工作盡在掌握：如同一系列流管道。

grunt有的插件在gulpjs.com上都能找到相對應，也有很多大神去維護，其中也不乏國內的大大們。

下面介紹一個簡單的前端開發構建過程：

示例插件：gulp-server-livereload

插件介紹：啟動一個前端服務，并且實時監聽，啟動瀏覽器頁面自動刷新，無需無盡的F5...

首先需要node.js環境。這里不提了。

npm install -g gulp

在項目目錄中，初始化項目，使用命令：

npm init

配置 package.json , 簡單的配置一下項目基本信息

安裝gulp插件：

npm install --save-dev gulp gulp-server-livereload

項目目錄下新建gulpfile.js，添加以下內容：

 1 const gulp = require('gulp'),
 2   server = require('gulp-server-livereload');
 3 
 4 // 新建服務任務，啟動實時監聽
 5 gulp.task('server',()=>{
 6   gulp.src('.')
 7   .pipe(server({
 8     livereload: true,
 9     directoryListing: true,
10     open: true,
11     host: 'localhost',
12     port: 8080
13   }))
14 });
15 
16 // 配置開發任務
17 gulp.task('develop',['server']);

以上，在項目目錄下終端運行：gulp develop就會自動跑起服務來，同時打開瀏覽器開啟自動刷新。

瀏覽器需要安裝livereload插件，安裝方法百度

?

轉載于:https://www.cnblogs.com/guyunxiang/p/5260283.html

總結

以上是生活随笔為你收集整理的gulp 配置自动化前端开发的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。