gulp詳細入門教程【ITO】gulp入門安裝－IT工程師數位筆記本

文章出處

前言

老版的系統，前后臺耦合，不利于開發，更不利于維護，當前軟件行業，Web前端工程化的思想已逐步將軟件分離，使Web前端模塊化、組件化、工程化。gulp就是Web前端工程化的工具之一。

gulp是基于Nodejs的自動任務運行器，它能自動的完成javascript/coffee/sass/less/html/image/css 等文件的的測試、檢查、合并、壓縮、格式化、瀏覽器自動刷新、部署文件生成，并監聽文件在改動后重復指定的這些步驟。它不僅能對網站資源進行優化，而且在開發過程中很多重復的任務能夠使用正確的工具自動完成。

安裝Nodejsgulp是基于Nodejs環境，所以要使用gulp，首先要安裝Nodejs。打開它的官網，根據你系統的版本，它會自動的給出符合的.msi文件，下載完成后直接安裝即可。npmnpm（node package manager）是nodejs的包管理器，用于node插件管理（安裝、卸載、管理依賴等），它是在安裝nodejs時一同安裝的。npm使用在cmd控制臺中：安裝插件：npm insatll -g --save-dev 卸載插件：npm uninstall -g --save-dev
刪除全部插件：npm install rimraf -g(回車）rimraf node_modules 更新插件：npm update -g --save-dev 更新全部插件：npm update --save-dev 查看已安裝目錄：npm list (-g：全局安裝；不寫為非全局安裝，將會安裝在當前定位目錄，全局安裝可以通過命令行在任何地方調用它，本地安裝將安裝在定位目錄的node_modules文件夾下，通過require()調用。 --save：將保存配置信息至package.json。 -dev：保存至package.json的devDependencies節點，不指定-dev將保存至dependencies節點；一般保存在dependencies的像這些express/ejs/body-parser等等。）cnpm由于npm安裝插件是從國外服務器下載，受網絡影響很大，所以我們可以選裝淘寶的cnpm。安裝命令：npm install cnpm -g --registry=https://registry.npm.taobao.org cnpm和npm用法完全一致，只需將命令中npm換為cnpm即可。gulpgulp要安裝兩份，一份全局，一份本地，全局安裝gulp是為了執行gulp任務，本地安裝gulp則是為了調用gulp插件的功能。全局安裝gulp：cnpm install gulp -g 本地安裝gulp：cnpm install gulp --save-dev檢查是否安裝成功所有的安裝均可以使用查看版本號來檢查是否安裝成功。命令：xxx -v，例如gulp -v，如出現版本號則說明安裝成功。package.json文件package.json是基于nodejs項目不可缺少的配置文件，是存放在項目根目錄的js文件。我們可以自己手寫，也可以用命令執行：cnpm init，將需要的信息填入即可。
gulpfile文件gulpfile.js是gulp項目的配置文件，是位于項目根目錄的普通js文件。路徑所有的步驟都要在定位目錄后執行，比如我要安裝gulp以及其他的插件，需要定位到安裝目錄在進行安裝，否則會默認到C盤的Administrator目錄下。總結今天只是把gulp的安裝以及運行機制大致做了個了解，要“知道”一個東西，首先要“知道”一個東西。
看文倉www.kanwencang.com網友整理上傳,為您提供最全的知識大全,期待您的分享，轉載請注明出處。
歡迎轉載：http://www.kanwencang.com/bangong/20170106/82867.html

文章列表