構建工具 gulp（基礎配置）

雖然他不反對用webpack，但是我也想接觸一下gulp，就被他帶上車了，也寫這篇文來記錄一下我的過程吧

我也是初次接觸gulp，之前用過webpack，下面就從專案裡安裝好gulp外掛程式開始寫吧

除了安裝gulp還需要安裝以下常用的外掛程式（都是我這個專案裡所要用到的）

然後本專案的包管理器是bower，所以下面也會出現從bower的檔案目錄下拷貝模組的情況

在此再解釋一下我的專案檔案結構是如何安排的

'src'資料夾用於存放原始碼，'build'資料夾用於存放開發環境的目錄，'build'資料夾用於存放生產環境的目錄

好了，然後進入重點，開始配置gulp，

在專案目錄下建立乙個js檔案，名叫gulpfile.js，然後進入編輯，下面就是以**+注釋的形式去介紹具體配置了

//

配置gulp
var gulp = require('gulp');//
最重要的模組引入
//引入這個模組的目的：簡化輸入外掛程式字首的操作
var $ = require('gulp-load-plugins')();//
注意：需要例項化（）
var open = require('open');
//封裝乙個物件來簡化路徑輸入
srcpath : 'src/',
devpath : 'build/',
prdpath : 'dist/'};
//開始定義任務
//拷貝bower裡的檔案到開發目錄和生產目錄中
gulp.task('lib',function());
//拷貝src裡的檔案到開發目錄和生產目錄中
gulp.task('html',function
());
//拷貝data裡的json(假資料)到開發目錄和生產目錄中
gulp.task('json',function
());
gulp.task('less',function
());
gulp.task('js',function
());
gulp.task('image',function
());
//定義乙個總任務，去完成專案的打包
gulp.task('build',['image','js','less','lib','html','json']);
//定義乙個刪除開發目錄和生產目錄的任務
gulp.task('clean', function
());
//定義乙個啟動伺服器的任務
gulp.task('serve',['build'],function
() );
//自動開啟**
//監控原路徑的檔案，為了達到修改原檔案就會自動執行對應的構建任務的目的
gulp.watch('bower_components/**/*', ['lib']);
});//
定義乙個預設的任務，在控制台輸入gulp就會自動執行serve任務
gulp.task('default',['serve']);

最後再說一下需要注意的：

1.這個本地伺服器自動重新整理功能是不支援老ie的

2在啟動本地伺服器後如果要在控制台退出，可以輸入control+c(同webpack-server)

入門gulp前端構建工具

1.全域性安裝 gulp 倘若之前電腦安裝過，則跳過此步驟 cnpm install g gulp 2.作為專案的開發依賴 devdependencies 安裝 此步驟會自動在目錄下建立package.json檔案，因此無需cnpm init cnpm install s e dev gulp 3....

前端構建工具gulp安裝教程

首先先問自己乙個問題 平時用sass less寫css，用jade寫 html 那麼這些檔案的的測試 檢查 合併 壓縮 格式化 部署，監聽。應該怎麼完成呢？就來壓縮合併來講，可以減少多個css，js檔案請求，優化網頁效能，這樣的工作是否應該有乙個很好的解決方案呢？答案就是gulp。安裝gulp如下幾...

gulp前端自動化構建工具

gulp是基於node.js的乙個構建工具 自動任務執行器 開發者可以使用它自動化工作流程。一些常見的 重複的任務，例如 網頁自動重新整理 css預處理 檢測 壓縮 等，只需要簡單的命令就能全部完成。使用它可以簡化工作，提高開發效率。gulp優點 簡潔 gulp側重 優於配置 最直觀的感受，更為簡單...