用gulp構建乙個簡單常用的的環境

gulp作為乙個自動化構建工具，在前端開發中大大的提高了開發效率，前端開發者們可以利用他減少許多繁複無腦的操作。

這裡簡單構建乙個小環境，就可以在以後的學習中，直接新建各種test.html測試我們新學習的知識點啦~

【看不明白的，有疏漏的，歡迎指出，我更改措辭或者bug】

入門就不講了，會用npm的同學應該都清楚，這裡貼乙個既有的官方指南。gulp入門指南

詳細的配置我就不講了，api文件戳進去看。簡單做點通俗的講解。

gulp是由每個小task組成的，我們可以類似函式一樣，把我們需要的乙個個小功能以各種task分開寫，然後可以在cmd裡使用gulp方式來執行。

當然任務多了，我們就需要一鍵執行所有操作，所以一般情況下，我們只執行gulp命令，則會執行所註冊的名為 default 的 task，然後在default這個任務後面，新增我們寫好的其它task名的陣列，則會挨個執行我們寫好的各種task。不然只執行function。

如果沒有default這個 task，那麼gulp命令會報錯。

gulp.task('default', function() );

注意：預設的，task 將以最大的併發數執行，也就是說，gulp 會一次性執行所有的 task 並且不做任何等待。如果你想要建立乙個序列化的 task 佇列，並以特定的順序執行，嗯，戳文件api文件。

其實說白了就是匹配我們要處理的檔案，src就是路徑。

gulp.src('client/templates/*.jade')

*自然是表示任意，全部。

glob請參考node-glob語法或者，你也可以直接寫檔案的路徑。

其實就是把src匹配到的檔案傳遞到後面來執行。括號裡就是我們要進行的各種操作。

有點類似js語法，不難理解，用.接起來，一步步執行。

一般我們會一行行寫，可讀性好點，寫一行不友好。

gulp.src('client/templates/*.jade')
.pipe(jade())
.pipe(minify())
.pipe(gulp.dest('build/minified_templates'));

生成處理好的檔案。

你可以將它 pipe 到多個資料夾。如果某資料夾不存在，將會自動建立它。

gulp.src('./client/templates/*.jade')
.pipe(jade())
.pipe(gulp.dest('./build/templates'))
.pipe(minify())
.pipe(gulp.dest('./build/minified_templates'));

監視檔案，並且可以在檔案發生改動時候做一些事情。

gulp.watch(glob [, opts], tasks) 
或gulp.watch(glob [, opts, cb])

需要在檔案變動後執行的乙個或者多個通過 gulp.task() 建立的 task 的名字，

var watcher = gulp.watch('js/**/*.js', ['uglify','reload']);
watcher.on('change', function(event) );

也可以直接執行function，一樣的。

gulp.watch('js/**/*.js', function(event) );

gulp的很多操作都是用外掛程式執行的，當然，詳細操作自然是每個外掛程式看作者文件了！而且同乙個功能的外掛程式也層出不窮，大家可以根據需要自行選擇。好了，開始我們的構建，注意，提到的每乙個外掛程式都要npm安裝

注意：每乙個外掛程式都存在可配置的空間，所以關於最大化利用好每個外掛程式，也是參照文件來的，這裡我們取一些通用配置，具體視專案情況而定。

無可厚非，**實時儲存，瀏覽器實時重新整理，是前端最想要的功能，手動重新整理瀏覽器相信是每乙個前端新手要吐的操作。

採用gulp-connect外掛程式。

根目錄下開啟服務，埠號為2323，開啟實時重新整理，區域網內可用。

var connect = require('gulp-connect');
var serverconfig = 
gulp.task('server',function());

採用gulp-livereload。

開啟重新整理，監聽html變化，並實時重新整理。

var livereload = require('gulp-livereload')
gulp.task('watch', function () )
});

其實到這裡，乙個微型的服務就搭建起來了，最後別忘了最根本的一句

var gulp = require('gulp');

不然是起不來的。

為了簡便，可以在gulpfiles.js裡新增一行,

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

直接執行gulp就好,讓他們依次執行。

到這裡，其實就是乙個小規模的除錯環境，接下來，讓我們公升級一下，開始構造簡單的發布環境

採用的是gulp-htmlmin外掛程式。

抽取src目錄下的所有html檔案，匯入到htmlmin外掛程式進行處理，並將結果輸出到public目錄，最後重新重新整理已開啟的服務。

var htmlmin = require('gulp-htmlmin');
gulp.task('html', function()))
.pipe(gulp.dest('public'))
.pipe(connect.reload());
});

採用的是gulp-uglify外掛程式，但同時，我們也用到了另乙個外掛程式gulp-concat，這個是用來連線各個檔案組成乙個檔案。

抽取src/js下的所有js檔案，將其合併，然後壓縮，輸出到public/js目錄，最後服務過載。

var uglify = require('gulp-uglify');
var concat = require('gulp-concat');
gulp.task('script',function()))
.pipe(gulp.dest('public/js'))
.pipe(connect.reload());
});

採用的是gulp-cssnano外掛程式。類似js，不解釋了。

var cssnano = require('gulp-cssnano');
gulp.task('css',function())

採取的是gulp-smu****外掛程式，類似js，不解釋。

var smu**** = require('gulp-smu****');
gulp.task('imagemin',function()))
.pipe(gulp.dest('public/images'))
.pipe(connect.reload());
});

這個gulp-watch在前面有講到，其實就是開啟監聽，並重新執行各個html

，js，css，imagemin壓縮任務。

相信大家對比前面的gulp-livereload能夠看的出來，這裡兩者是有衝突的，乙個只是除錯下重新整理頁面，乙個卻每次都要壓縮。

所以其實實際專案中是不會把壓縮任務配置到watch裡，會造成資源浪費，你每儲存一次，就會壓縮。只會在最後除錯完成，執行壓縮一次。

gulp.task('watch', function () );

做乙個min的task就好，只需要gulp min。

gulp.task('min',['html','script','css','imagemin']);

用gulp構建乙個簡單常用的的環境

構建乙個簡單的react typescript專案

OpenCV cvui構建乙個簡單的介面

構建乙個簡單的WCF應用

用gulp構建乙個簡單常用的的環境

構建乙個簡單的react typescript專案

OpenCV cvui構建乙個簡單的介面

構建乙個簡單的WCF應用

相關推薦