本篇文章主要介紹了淺談gulp創建完整的專案流程,現在分享給大家,也給大家做個參考。
gulp是前端開發過程中自動建置專案的工具,相同作用的還有grunt。建置工具依靠外掛程式能夠自動監控檔案變更以及完成js/sass/less/html/image/css/coffee等檔案的語法檢查、合併、重新命名、壓縮、格式化、瀏覽器自動刷新、部署檔案等功能。
所有的環境都是在 node 安裝好的基礎上執行的。 node -v 查看node的安裝。 npm -v查看npm 的安裝情況.
gulp自動化建置常用參數
1、src 讀取檔案或資料夾
2、dest 產生檔案也就是寫文件
3、watch 偵測檔案
4、tesk 指定任務
#5、pipe 用流的方式處理gulp.
gulp建立一個完整的項目的目錄結構如下
解釋:
bower_components 這個檔案下邊放的是透過bower安裝的第三方的js等。
build : 專案整合目錄,一般在這裡整合所有的程式碼,不壓縮。
dist : 專案發布目錄,也是壓縮所有檔案後的。
src : 專案原始檔目錄,這裡放置的都是原始檔。
test : 這個是寫自動化測試的
1、在終端機進入專案根目錄,安裝bower.
bower init
初始化Bower,產生bower.json文件,然後安裝所需的的插件以及第三方檔案例如angular 執行
bower install - - save angular
#具體查看bower 的使用方法。
2、安裝檢視gulp,在專案根目錄下。
全域安裝gulp
npm install --global gulp
然後建立設定檔
npm init 初始化並建立 package.json檔案
#npm install --save-dev gulp 將Node的配置環境裝進設定檔中。
然後安裝需要的插件
npm install xxx —save-dev將檔案自動寫入設定檔中。
一般常用的創建整站的有這些,多個的話可以將插件以空格的形式分開
npm install gulp-clean gulp-concat gulp-connect gulp-cssmin gulp-imagemin gulp-less gulp-load-plugins gulp-uglify open -—save-dev
然後則是gulpfile.js配置文件的編寫。具體為下
//引入gulp var gulp = require('gulp'); //这样的话 其他的模块可以直接使用 $ 符号来引入 var $ = require('gulp-load-plugins')(); var open = require('open'); //定义目录路径 var app = { //源代码,文件目录 srcPath: 'src/', //文件整合之后的目录 devPath: 'build/', //项目,发布目录上产部署 prdPath: 'dist/' }; //通过bower安装的插件,需要拷贝到 devPath prdPath中 gulp.task('lib',function(){ // /**/* 读取这个文件夹下边的所有的文件或者文件夹 gulp.src('bower_components/**/*') //读取完整后进行操作 西安拷贝到整合目录 并重命名,在拷贝到生产目录并重命名 .pipe(gulp.dest(app.devPath + 'vendor')) .pipe(gulp.dest(app.prdPath + 'vendor')) .pipe($.connect.reload()); //文件更改后自动变异 并执行启动服务重新打开浏览器 }); //将 html 拷贝到 devPath prdPath中 gulp.task('html',function(){ gulp.src(app.srcPath + '**/*.html') .pipe(gulp.dest(app.devPath)) .pipe(gulp.dest(app.prdPath)) .pipe($.connect.reload()); }); //将 模拟的json 文件 拷贝到 devPath prdPath中 gulp.task('json',function(){ gulp.src(app.srcPath + 'data/**/*.json') .pipe(gulp.dest(app.devPath + 'data')) .pipe(gulp.dest(app.prdPath + 'data')) .pipe($.connect.reload()); }); //将 index.less 文件 拷贝到 devPath prdPath中,index.less引入了所有的其他的less gulp.task('less',function(){ gulp.src(app.srcPath + 'style/index.less') .pipe($.less()) .pipe(gulp.dest(app.devPath + 'css')) .pipe($.cssmin()) .pipe(gulp.dest(app.prdPath + 'css')) .pipe($.connect.reload()); }); // 拷贝 js 文件 将所有的源文件中的js 文件整合成index.js 然后拷贝过去 gulp.task('script',function(){ gulp.src(app.srcPath + 'script/**/*.js') .pipe($.concat('index.js')) .pipe(gulp.dest(app.devPath + 'js')) .pipe($.uglify()) .pipe(gulp.dest(app.prdPath + 'js')) .pipe($.connect.reload()); }); //拷贝 压缩 图片 最后放到发布目录下 gulp.task('image',function(){ gulp.src(app.srcPath + 'image/**/*') //江源图片放到整合目录下,在压缩放到生产目录下 .pipe(gulp.dest(app.devPath + 'image')) .pipe($.imagemin()) .pipe(gulp.dest(app.prdPath + 'image')) .pipe($.connect.reload()); }); //总的方法 gulp.task('build',['image', 'script', 'less', 'json', 'html', 'lib']); //清除旧文件,每次更新的时候 gulp.task('clean',function(){ gulp.src([app.devPath,app.prdPath]) .pipe($.clean()); }) //编写服务 gulp.task('serve',['build'], function() { $.connect.server({ //服务起来的入口 root: [app.devPath], //文件更改后自动刷新页面 livereload: true, //端口号 port: 1234 }); // 在 命令工具中执行 gulp serve 就相当于是启动了服务 //自动打开浏览器 open('http://localhost:1234'); //我们希望更改了文件,就自动编译,并且打包等然后打开浏览器 gulp.watch('bower_components/**/*' , ['lib']); //监听 script 下边的 js 文件,并执行 script 方法 gulp.watch(app.srcPath + 'script/**/*.js', ['script']); gulp.watch(app.srcPath + '**/*.html', ['html']); gulp.watch(app.srcPath + 'data/**/*.json', ['json']); gulp.watch(app.srcPath + 'style/**/*.less', ['less']); gulp.watch(app.srcPath + 'image/**/*', ['image']); //这样文件变更了就会自动构建 }); //默认执行的任务,直接 执行 gulp 变行了。都编写完成后再终端 执行 gulp 便可以了。 gulp.task('default', ['serve']);
這樣利用gulp創建一個完整的專案流程就結束了
上面是我整理給大家的,希望今後會對大家有幫助。
相關文章:
以上是使用gulp如何建立完整的專案流程的詳細內容。更多資訊請關注PHP中文網其他相關文章!

JavaScript在現實世界中的應用包括前端和後端開發。 1)通過構建TODO列表應用展示前端應用,涉及DOM操作和事件處理。 2)通過Node.js和Express構建RESTfulAPI展示後端應用。

JavaScript在Web開發中的主要用途包括客戶端交互、表單驗證和異步通信。 1)通過DOM操作實現動態內容更新和用戶交互;2)在用戶提交數據前進行客戶端驗證,提高用戶體驗;3)通過AJAX技術實現與服務器的無刷新通信。

理解JavaScript引擎內部工作原理對開發者重要,因為它能幫助編寫更高效的代碼並理解性能瓶頸和優化策略。 1)引擎的工作流程包括解析、編譯和執行三個階段;2)執行過程中,引擎會進行動態優化,如內聯緩存和隱藏類;3)最佳實踐包括避免全局變量、優化循環、使用const和let,以及避免過度使用閉包。

Python更適合初學者,學習曲線平緩,語法簡潔;JavaScript適合前端開發,學習曲線較陡,語法靈活。 1.Python語法直觀,適用於數據科學和後端開發。 2.JavaScript靈活,廣泛用於前端和服務器端編程。

Python和JavaScript在社區、庫和資源方面的對比各有優劣。 1)Python社區友好,適合初學者,但前端開發資源不如JavaScript豐富。 2)Python在數據科學和機器學習庫方面強大,JavaScript則在前端開發庫和框架上更勝一籌。 3)兩者的學習資源都豐富,但Python適合從官方文檔開始,JavaScript則以MDNWebDocs為佳。選擇應基於項目需求和個人興趣。

從C/C 轉向JavaScript需要適應動態類型、垃圾回收和異步編程等特點。 1)C/C 是靜態類型語言,需手動管理內存,而JavaScript是動態類型,垃圾回收自動處理。 2)C/C 需編譯成機器碼,JavaScript則為解釋型語言。 3)JavaScript引入閉包、原型鍊和Promise等概念,增強了靈活性和異步編程能力。

不同JavaScript引擎在解析和執行JavaScript代碼時,效果會有所不同,因為每個引擎的實現原理和優化策略各有差異。 1.詞法分析:將源碼轉換為詞法單元。 2.語法分析:生成抽象語法樹。 3.優化和編譯:通過JIT編譯器生成機器碼。 4.執行:運行機器碼。 V8引擎通過即時編譯和隱藏類優化,SpiderMonkey使用類型推斷系統,導致在相同代碼上的性能表現不同。

JavaScript在現實世界中的應用包括服務器端編程、移動應用開發和物聯網控制:1.通過Node.js實現服務器端編程,適用於高並發請求處理。 2.通過ReactNative進行移動應用開發,支持跨平台部署。 3.通過Johnny-Five庫用於物聯網設備控制,適用於硬件交互。


熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

AI Hentai Generator
免費產生 AI 無盡。

熱門文章

熱工具

MantisBT
Mantis是一個易於部署的基於Web的缺陷追蹤工具,用於幫助產品缺陷追蹤。它需要PHP、MySQL和一個Web伺服器。請查看我們的演示和託管服務。

PhpStorm Mac 版本
最新(2018.2.1 )專業的PHP整合開發工具

Dreamweaver CS6
視覺化網頁開發工具

SecLists
SecLists是最終安全測試人員的伙伴。它是一個包含各種類型清單的集合,這些清單在安全評估過程中經常使用,而且都在一個地方。 SecLists透過方便地提供安全測試人員可能需要的所有列表,幫助提高安全測試的效率和生產力。清單類型包括使用者名稱、密碼、URL、模糊測試有效載荷、敏感資料模式、Web shell等等。測試人員只需將此儲存庫拉到新的測試機上,他就可以存取所需的每種類型的清單。

SublimeText3漢化版
中文版,非常好用