這幾天去面試,常常被問到如何管理前端項目代碼的問題(目前用的是rails),後來去了解了一下,有一個叫gulp的前端自動化構建工具,就決定學習一下。css
網上找了好多參考資料,如今整理一遍。html
一. 安裝前端
先全局安裝node
npm install --global gulp // 有時候須要sudo npm install --global gulpgit
到項目所在文件夾github
npm install --save-dev gulp // 做爲項目的開發依賴安裝,安裝完後會出現一個node_modules文件夾面試
此時,若是輸入gulp,會出現以下提示:npm
No gulpfile foundjson
因此須要在項目的跟目錄新建一個gulpfile.js的文件gulp
文件內容: (關於這一部分,等會兒再說)
var gulp = require('gulp'); // 引用gulp
gulp.task('default', function() { // 設置默認任務
// 將你的默認的任務代碼放在這
});
再執行gulp命令,會出現以下提示:
[09:51:56] Using gulpfile ~/work/demos/todoapp/gulpfile.js
[09:51:56] Starting 'default'...
[09:51:56] Finished 'default' after 89 μs
證實gulp已經安裝完成,而且能夠執行default方法了。
可是到這裏還遠遠不夠,咱們須要繼續建立幾個文件夾和文件。
先在根目錄下建立兩個文件夾:
src(用於存放項目的html,css,js)和build(用於存放編譯壓縮過的html,css,js)
再在這兩個文件夾中分別建立styles和scripts文件夾,在src中建立一個index.html文件
如今執行npm init // 建立一個 package.json 文件,便於與開發團隊其餘成員分享當前環境信息
二. API
須要瞭解的就4個API,gulp.src(),gulp.dest(),gulp.task(),以及gulp.watch()。能夠參考文檔
1. gulp.src(globs[, options])
gulp.src("src/scripts/*.js") //獲取到src/scripts文件夾下的全部js文件流
.pipe(gulp.dest("build/scripts")); // 寫入到目標文件夾build/scripts中,注意這裏只能是文件夾的名稱
globs參數: // 文件匹配模式,相似正則
類型: String or Array
這個能夠參考node-glob
2. gulp.dest(path[, options])
path : 寫入文件的路徑 // 只能是文件夾的名稱,若是目標文件夾不存在,會自動建立
3. gulp.task(name[, deps, fn])
name: 任務名
deps:任務開始前須要被執行或完成(依賴)的任務,類型:array
gulp.task('mytask', ['array', 'of', 'task', 'names'], function() { });
這裏須要注意的是,若是依賴的任務是異步執行的,就須要手動作一些處理: 執行回調、返回promise或返回一個事件流。這些連接的文檔中都有,用到的話,能夠參看文檔。
fn: task中須要執行的代碼
4. gulp.watch(glob[, opts], tasks) 或 gulp.watch(glob[, opts, cb])
gulp.watch(glob[, opts], tasks)
tasks: 類型 Array
當監視的文件改變時,會執行tasks裏面的task
gulp.watch("src/*.html", ["reload", "uglify"]);
gulp.task("reload", function(){
// reload
});
gulp.task("uglify", function(){
// gulify
});
gulp.watch(glob[, opts, cb])
gulp.watch("src/*.html", function(event){
console.log("File" + event.path + "was" + event.type + ", running tasks...");
});
每次監視的文件改變,都會執行回調函數。
cb回調函數會傳入一個event對象,描述文件的變化。
event.type : added, deleted, changed
event.path: 觸發事件的文件路徑
好了,API部分就很少講了,網上有不少相關的講解,講得很細緻,我就不贅述了。
三. 插件
插件很是多,能夠參考文檔
安裝方法和使用方法,文檔中也都有
四. 構建任務
瞭解了上面的基礎以後,我最關心的就是如何構建一個server,監聽工做目錄,當目錄中有文件改變時,就自動從新加載頁面。
首先,要安裝這個插件 browser-sync
BrowserSync能夠同時同步刷新多個瀏覽器,更神奇的是你在一個瀏覽器中滾動頁面、點擊按鈕、輸入框中輸入信息等用戶行爲也會同步到每一個瀏覽器中。
npm install gulp-browser-sync --save-dev
gulpfile.js中:
var browserSync = require('browser-sync');
gulp.task('serve', function() {
browserSync.init({
server: './src/', // 解析src下的html
port: 3000
});
gulp.watch("src/*.html").on("change",browserSync.reload);
});
gulp.task('default', ['serve'], function() {
});
這個我也找了相關博客,能夠參考
命令行輸入gulp,就會自動打開瀏覽器,而且默認地址爲:http://localhost:3000
如今,咱們能夠裝一些須要的插件,寫入相關gulp.task(),來管理咱們的項目了。
ps:若是有理解的不對的地方,歡迎指正,謝謝!