gulp的作用
刪除檔案中冗餘的內容，壓縮檔案，減小檔案體積
實際專案中執行的都是壓縮完成以後的檔案
減小載入響應時間
gulp打包壓縮物件
html，css，js，sass，webserver
音訊，，外掛程式等正常情況下都是打包完成的，直接移動到dist檔案中就可以
伺服器食慾gulp一起繫結執行的，執行的是打包壓縮好的程式檔案
gulp執行過程
所有執行步驟必須嚴格遵守，尤其是語法規範必須嚴格執行
npm i -g gulp
2、建立專案檔案
原始檔src：
pages 儲存html檔案
css 儲存css檔案
sass 儲存sass檔案
images 儲存
js 儲存js檔案
plug 儲存外掛程式
壓縮檔案 dist：
將壓縮好的檔案存放在dist中
檔名稱與原檔名稱保持一致
實際專案中為了保持檔名稱路徑一致，不新增多餘的檔名字尾min等
3、檔案初始化
整個專案第一次執行
npm init -y
package.json 中 儲存了所有依賴包的資訊 以及 依賴包的相關設定
在專案路徑下,執行 npm install 會自動安裝依賴包
4、如果是第一次執行專案,需要逐一安裝依賴包
如果是已經有完整的 package.json
將 package.json 複製拷貝到指定的資料夾中,執行 npm install 會自動安裝記錄的依賴包
安裝依賴包 區域性/專案依賴包
npm i gulp gulp 依賴包
npm i gulp-cssmin css壓縮依賴包
npm i gulp-autoprefixer css新增字首依賴包
npm i gulp-uglify es5語法壓縮依賴包
npm i gulp-babel 其他語法轉化es5語法規範
npm i @babel/core 與 gulp-babel 配合的依賴包
npm i @babel/preset-env
npm i htmlmin html壓縮依賴包
npm i webserver 伺服器依賴包
npm i del 刪除檔案依賴包
npm i sass sass檔案依賴包
建立 gulpfile.js 檔案,定義gulp打包壓縮程式規範
1、載入所有依賴包
2、制定打包規範
a 、css 打包規範
const csshandler = function() ) )
.pipe( uglify() )
.pipe( gulp.dest( './dist/js' ) )
注意:1, babel( ) 以物件的形式定義引數
2, 先將其他語法規範,轉化為 es5 語法規範,再執行打包壓縮
c 、 html打包壓縮規範
const htmlhandler = function(){
return gulp.src( './src/pages/*.html' )
.pipe(htmlmin({
removeattributequotes : true , // 刪除屬性上的雙引號
removecomments : true , // 刪除注釋內容
collapsebooleanattributes : true , // 刪除布林屬性的屬性值
collapsewhitespace : true , // 刪除標籤之前的空格
minifycss : true , // 壓縮html檔案中的css程式
minifyjs : true , // 壓縮html檔案中的js程式
// 雖然可以壓縮html中的js和css,但是壓縮執行的不完美
// 實際專案中,不要有內部,js和css,都要寫成外部檔案形式
.pipe( gulp.dest( './dist/pages' ) )
注意: 1, htmlmin() 中以物件的形式定義引數
d 、等不需要打包壓縮的,就直接移動至dist資料夾
const imghandler = function(){
return gulp.src('./src/images/*.*')
.pipe( gulp.dest('./dist/images') )
e , 設定 伺服器執行規範 呼叫執行打包壓縮好的檔案
const webserverhandler = function(){
return gulp.src('./dist') // 指定的是執行檔案的目錄,也就是要執行的壓縮的檔案,所在的資料夾
.pipe(webserver({
host:'127.0.0.1', // 主機網域名稱,當前就是 127.0.0.1 或者 localhost
port:'8080', // 定義監聽埠
livereload:true, // 執行熱啟動,如果程式**,改變,自動重新整理頁面,不用重啟伺服器,不用手動重新整理頁面
open:'./pages/index.html', // 預設開啟的網頁,輸入 127.0.0.1:8080 位址就會直接開啟的頁面
// 預設的位址是,gulp.src()設定的資料夾位置,也就是預設是 dist 壓縮資料夾所在的位置,執行的也是壓縮之後的檔案
注意: 1, gulp.src('./dist') 設定執行的打包壓縮檔案,儲存的資料夾路徑
2, open 設定伺服器啟動之後,執行的預設頁面
設定相對路徑的起始位置,是 gulp.src() 設定的資料夾位置
3, livereload:true, 熱啟動 頁面樣式等更新,不用手動重新整理,伺服器會自動重新整理
f、制定sass的編譯打包壓縮規範
const sasshandler = function(){
return gulp.src('./src/sass/*.scss')
.pipe( sass() ) // 將sass編譯為css
.pipe( autoprefixer() ) // 之後就是執行css的打包壓縮規範
.pipe( cssmin() )
.pipe( gulp.dest( './dist/css' ) )
設定監聽程式
a , 設定刪除規範,也就是每次執行新的打包壓縮之前,先刪除原始的打包內容
const delhandler = function(){
return del(['./dist']);
b , 設定監聽規範,指定監聽的檔案資料夾,如果出現修改,會自動重新打包壓縮
const watchhandler = function(){
gulp.watch( './src/css/*.css' , csshandler);
gulp.watch( './src/js/*.js' , jshandler);
gulp.watch( './src/pages/*.html' , htmlhandler);
gulp.watch( './src/images/*.*' , imghandler);
注意: 1, gulp.watch() 第乙個引數是,監聽的資料夾檔案路徑
gulp.watch() 第二個引數是,監聽檔案內容發生改變時,執行的打包規範
2, 必須要定義的打包規範的函式名稱
c , 設定匯出預設執行程式
module.exports.default = gulp.series(
delhandler,
gulp.parallel( csshandler , jshandler , htmlhandler , imghandler),
webserverhandler,
watchhandler,
注意: 1,設定 module.exports.default 之後 ,再執行gulp,只要在路徑下輸入 gulp 就可以了
2,gulp.series() 按照順序執行設定的程式,順序必須正確
gulp.parallel() 是同時執行所有設定的程式
順序一定是 : 先刪除之前打包壓縮的檔案
在重新壓縮所有需要打包壓縮,移動的檔案
開啟伺服器
執行監聽
標籤：npm,src,壓縮,gulp,詳解,打包,css
gulp不生成打包檔案 gulp打包詳解
gulp的作用 刪除檔案中冗餘的內容，壓縮檔案，減小檔案體積 實際專案中執行的都是壓縮完成以後的檔案 減小載入響應時間 gulp打包壓縮物件 html，css，js，sass，webserver 音訊，外掛程式等正常情況下都是打包完成的，直接移動到dist檔案中就可以 伺服器食慾gulp一起繫結執行...
gulp不生成打包檔案 gulp自動化打包（下）
打包流程簡介 本次打包大致過程是checkout出想要打包的git版本 可以是tag，也可以是branchname 然後依次讀取專案中的html less js進行壓縮合併等操作，複製專案中所用到的第三方庫到輸出目錄 即plugins中的外掛程式，比如lodash echarts等，前邊壓縮合併的j...
gulp 移動檔案 gulp打包詳解
gulp的作用 刪除檔案中冗餘的內容，壓縮檔案，減小檔案體積 實際專案中執行的都是壓縮完成以後的檔案 減小載入響應時間 gulp打包壓縮物件 html，css，js，sass，webserver 音訊，外掛程式等正常情況下都是打包完成的，直接移動到dist檔案中就可以 伺服器食慾gulp一起繫結執行...