導航:首頁 > 文件處理 > gulp壓縮教程

gulp壓縮教程

發布時間:2024-03-23 22:27:54

❶ gulp壓縮怎麼排除node

通過 gulp.src([...])來控制。

['./**/*.js','!./node_moles/**']
不過一般都是按文件夾來的,你寫的js在哪一個文件夾就指向哪一個文件夾:
比如js文件都 myScript/**/*.js ,則:
gulp.src(['./myScript/**/*.js'])
....

❷ gulp執行壓縮時很慢怎麼實現

1、在任務管理器中(ctrl+alt+delete),選性能,看卡住的時候哪些程序內存佔用過多,cpu使用率過高,內存過多的話,上網查一下是什麼進程,可結束的就結束程序。cpu過高,可試試換操作系統。還可在事件查看器中看系統經常報什麼錯,看能否找出問題。2、W7系統,可下載W7優化大師,優化一下。W8系統有W8優化大師,XP有優化大師。3、W7、W8:開始-運行(輸入msconfig)-回車-引導---高級選項---勾選"處理器個數",選擇最大核心數--勾選"最大內存"--確定。回到系統配置窗口-啟動,保留殺毒軟體和輸入法,其它的全部禁用。4、用金山或者360衛士,在優化系統中打開開機加速,關閉一些你不需要開機啟動的進程。5、進行磁碟碎片整理和磁碟清理。注意:W7不能壓縮C盤來增大空間,否則無法啟動。

❸ gulp壓縮js的時候出現如下錯誤提示 events.js 141,求大神解答!

感覺上是你有代碼在產生錯誤輸出而且沒有被處理。能把具體錯誤的那個文件的代碼發一下嗎?

❹ 為什麼用gulp把多個js文件合並壓縮後,再直接引入頁面就報錯了

合並成一個JS文件之後,代碼的作用域擴大,難免會造成沖突。找到報錯的代碼所在位置,找到原JS文件修改下。
舉個例子:a.js 中有var foo = 1; b.js 中也有 var foo = 10; 那麼合並之後就會有兩個 foo 變數, 這樣一來在新的js文件中,foo的值就是寫在後面的一個,而恰好後面的值會沖突報錯。
因此,在合並之前需要確定每個js文件都能正常工作,而且沒有函數、變數上的沖突。

❺ 前端構建工具Gulp.js 你知多少..(webpack/gulp/grunt)

@ TOC

閱讀本文章之前,相信你已經對前端構建工具(webpack、gulp、grunt)有一定的認知和了解了,那麼他們之間究竟有什麼區別呢?

gulp文檔上面有這么一句話 ,也就是說 gulp是一個自動化構建工具;
gulp的一些功能如下(包括但不限於):

其實Webpack和另外兩個並沒有太多的可比性

傻瓜式起步照搬官網文檔
1.安裝

2.在項目根目錄下創建一個名為 gulpfile.js 的文件:

3.運行 gulp:

默認的名為 default 的任務(task)將會被運行,在這里,這個任務並未做任何事情。
具體詳情可以查看 gulpjs.com文檔

新建一個項目gulp-test
環境:

1.新建文件以下文件如下

其中 gulpfile.js 是我們gulp的配置文件,啟動gulp默認會找個這個文件並執行;
2.接下來安裝依賴

一直按回車Enter初始化package.json文件(小技巧: npm iniy -y 可以免去繁瑣的enter步驟)
此時我們的目錄結構是這樣了

安裝依賴

這里頁面實時刷新只講這個 gulp-connect ,其他詳情可以參照 Browsersync 和文章 gulp-livereload

安裝完依賴後配置gulpfile.js如下:

大概講解一下gulpfile.js:

gulp.task 是gulp的api 定義一個使用 Orchestrator 實現的任務(task)
如上我們定義了 my-task-js my-task-css html clean default watch server 等任務,其中:

my-task-js 是將 符合所提供的匹配模式的js 進行檢測(gulp-jshint)、壓縮(gulp-uglify)、合並(gulp-concat)、重命名(gulp-rename)、輸出(gulp.dest)到/dist/js目錄下;

my-task-css 是將 符合所提供的匹配模式的sass進行編譯(gulp-sass)、壓縮(gulp-uglify)、合並(gulp-concat)、重命名(gulp-rename)、輸出(gulp.dest)到/dist/css目錄下;

html 是將 符合所提供的匹配模式的html進行監聽,如果有變化則connect.reload()

clean 是如果任務重新啟動時 刪除舊文件;

default gulp默認啟動的任務

watch gulp的api 監視文件,並且可以在文件發生改動時候做一些事情。它總會返回一個 EventEmitter 來發射(emit) change 事件。

server 依賴gulp-connect啟動一個伺服器

配置完gulpfile.js之後,我們給js和css及html加點東西:

首先js/helloworld.js

css/index.scss

index.html

運行gulp

瀏覽器效果:

接下來我們修改helloworld.js來看看是否能實時刷新
修改如下:

按保存之後,終端給我們報了一個錯:

查看js發現我們用了es6語法的聲明語句 但當前gulp無法處理es6語法,有問題解決問題,es6=>es5

解決方案:
安裝gulp-babel babel-core babel-preset-es2015

gulpfile.js修改如下:

運行

依然報上面的錯;找了一些原因發現,雖然安裝了相關依賴,卻沒有配置.babelrc文件,即babel還沒轉化es6

根目錄添加.babelrc文件

重新運行:

查看dist下的js文件

改變helloworld.js檢查頁面是否刷新

保存,頁面的天空藍換成你們喜歡的yellow顏色

修改index.scss 查看是否會刷新頁面

最後修改index.html 查看是否會刷新頁面

今天主要學習了gulp的簡單項目搭建及實時更新配置;其實gulp類似於grunt的弱化版,但更簡單好用,只是插件會少一些,目前主流的項目搭建工具主要是webpack,但依然有不少項目還用著gulp或者grunt

擴展:

下面還有一些樓主的學習筆記:

有興趣的可以多多交流@ 樓主博客

閱讀全文

與gulp壓縮教程相關的資料

熱點內容
安卓上的谷歌地圖怎麼用 瀏覽:181
安卓命令行打包 瀏覽:514
編程文字與數字教學視頻 瀏覽:815
如何看手機號碼注冊哪些app 瀏覽:411
linux查看總內存 瀏覽:850
python進程間共享 瀏覽:436
js如何獲取本地伺服器地址 瀏覽:68
gfx什麼時候支持安卓十一系統 瀏覽:939
壓縮機90兆帕 瀏覽:928
程序員調侃語句 瀏覽:579
不是php函數的是 瀏覽:998
壓縮文件好處 瀏覽:785
3d266期神童三膽計演算法 瀏覽:189
通過愛思助手怎麼下載app 瀏覽:323
vi命令將文件創在桌面上 瀏覽:923
程序員做競價 瀏覽:696
江蘇中小學編程納入課程 瀏覽:730
單純形法包括動態規劃演算法 瀏覽:951
cpdf百度網盤 瀏覽:671
綜合布線工程中配線架的演算法 瀏覽:926