這一次的gulp構建專案系列教程，將重頭到尾，一步一步的搭建起乙個完整的gulp專案，該專案完全能夠滿足開發需求，能夠給開發人員帶來最大的便利，也基本解決了在實戰專案中遇到的所有問題。
npm init // 一路回車就行（預設已安裝node）,
"author"
:"",
"license"
:"isc"
}
npm i -g gulp/**
* gulp gulp模組
* gulp-concat 合併檔案
* gulp-uglify 壓縮js
* gulp-csso 壓縮css
* gulp-imagemin 壓縮
* gulp-clean 清空資料夾
*/
npm i -d gulp gulp-concat gulp-uglify gulp-csso gulp-imagemin gulp-clean
var gulp = require(
'gulp');
var concat = require(
'gulp-concat'
); // 合併檔案
var uglify = require(
'gulp-uglify'
); // js 壓縮
var csso = require(
'gulp-csso'
); // css壓縮
var imagemin = require(
'gulp-imagemin'
); // 壓縮
var clean = require(
'gulp-clean'
); // 清空資料夾
// 打包html
gulp.task(
'html', function())
;// 打包js
gulp.task(
'js_libs', function())
;gulp.task(
'js_main', function())
;// 打包css
gulp.task(
'css_main', function())
;// 打包其他資源
gulp.task(
'images', function()
)) .pipe(gulp.dest(
'./dist/images'));
});// 清空dist資料夾
gulp.task(
'clean', function())
;// 預設任務
這裡展示的是最基礎的gulp構建功能，後續會深入解決gulp各項模組的應用，實現全方位的自動化構建。以下大致列出會解決的問題及說明
gulp構建專案（一）：環境準備及專案基礎結構搭建
gulp構建專案（二）：browser-sync啟本地服務並開啟瀏覽器
gulp構建專案（三）：gulp-watch監聽檔案改變、新增、刪除
gulp構建專案（四）：run-sequence實現逐個執行任務
gulp構建專案（五）：gulp-if條件判斷及環境變數設定
gulp構建專案（六）：gulp-html-tpl處理公用模板
gulp構建專案（七）：gulp-uglify壓縮js以及檢查js語法錯誤
gulp構建專案（八）：gulp編譯less，新增css字首以及壓縮css
gulp構建專案（九）：gulp-imagemin壓縮及gulp-cache快取
gulp構建專案（十）：gulp-rev-collector-dxb新增版本號（?hash）
gulp構建專案（十一）：gulp-htmlmin壓縮html
gulp構建專案（十二）：gulp-babel編譯es6
gulp構建專案（十三）：babel-polyfill編譯es6新增api
gulp構建專案（十四）：gulp-rename重定義打包生成檔案的路徑
.gulp構建專案（附錄一）：gulp發生錯誤時，程序掛掉的問題
windows webrtc編譯一 環境準備
一 準備穩定的翻牆軟體 1.我個人購買的是361vpn 連線時選擇pptp方式 其他方式可能還需要設定 這個我沒有實際操作過 二 安裝需要的環境 1.win10 64位 32位不支援 win7筆者未驗證 2.安裝vs2015 update3 或之後版本 之前版本編譯時無法通過 3.安裝windows...
Python學習筆記（一） 環境準備
人生苦短，快學python！最近開始想繼續重拾機器學習興趣，故想系統學習一下python。本章主要介紹anaconda的安裝，anaconda是python的乙個開源版本，裡面包含了各種各樣的python庫，比較全！我使用是mac系統，故介紹一下mac的安裝步驟及配置。mac下anaconda預設安...
webpack react專案搭建一 環境
字數1245 閱讀1180 喜歡4 見知乎文章 tbd mkdir webpack react demo cd webpack react demo npm init touch gitignore touch webpack.config.js 其中.gitignore用於說明 提交時忽略的檔案，...