本篇文章主要介紹了淺談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字符串替換方法詳解及常見問題解答 本文將探討兩種在JavaScript中替換字符串字符的方法:在JavaScript代碼內部替換和在網頁HTML內部替換。 在JavaScript代碼內部替換字符串 最直接的方法是使用replace()方法: str = str.replace("find","replace"); 該方法僅替換第一個匹配項。要替換所有匹配項,需使用正則表達式並添加全局標誌g: str = str.replace(/fi

簡單JavaScript函數用於檢查日期是否有效。 function isValidDate(s) { var bits = s.split('/'); var d = new Date(bits[2] '/' bits[1] '/' bits[0]); return !!(d && (d.getMonth() 1) == bits[1] && d.getDate() == Number(bits[0])); } //測試 var

本文探討如何使用 jQuery 獲取和設置 DOM 元素的內邊距和外邊距值,特別是元素外邊距和內邊距的具體位置。雖然可以使用 CSS 設置元素的內邊距和外邊距,但獲取準確的值可能會比較棘手。 // 設定 $("div.header").css("margin","10px"); $("div.header").css("padding","10px"); 你可能會認為這段代碼很

本文探討了十個特殊的jQuery選項卡和手風琴。 選項卡和手風琴之間的關鍵區別在於其內容面板的顯示和隱藏方式。讓我們深入研究這十個示例。 相關文章:10個jQuery選項卡插件

發現十個傑出的jQuery插件,以提升您的網站的活力和視覺吸引力!這個精選的收藏品提供了不同的功能,從圖像動畫到交互式畫廊。讓我們探索這些強大的工具:相關文章:1

HTTP-Console是一個節點模塊,可為您提供用於執行HTTP命令的命令行接口。不管您是否針對Web服務器,Web Serv

本教程向您展示瞭如何將自定義的Google搜索API集成到您的博客或網站中,提供了比標準WordPress主題搜索功能更精緻的搜索體驗。 令人驚訝的是簡單!您將能夠將搜索限制為Y

當div內容超出容器元素區域時,以下jQuery代碼片段可用於添加滾動條。 (無演示,請直接複製到Firebug中) //D = document //W = window //$ = jQuery var contentArea = $(this), wintop = contentArea.scrollTop(), docheight = $(D).height(), winheight = $(W).height(), divheight = $('#c


熱AI工具

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

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

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

AI Hentai Generator
免費產生 AI 無盡。

熱門文章

熱工具

DVWA
Damn Vulnerable Web App (DVWA) 是一個PHP/MySQL的Web應用程序,非常容易受到攻擊。它的主要目標是成為安全專業人員在合法環境中測試自己的技能和工具的輔助工具,幫助Web開發人員更好地理解保護網路應用程式的過程,並幫助教師/學生在課堂環境中教授/學習Web應用程式安全性。 DVWA的目標是透過簡單直接的介面練習一些最常見的Web漏洞,難度各不相同。請注意,該軟體中

Atom編輯器mac版下載
最受歡迎的的開源編輯器

Dreamweaver Mac版
視覺化網頁開發工具

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

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