首頁 web前端 js教程 gulp安裝+打包+合併最詳解

gulp安裝+打包+合併最詳解

Apr 14, 2018 pm 02:27 PM
gulp 合併 詳解

這次帶給大家gulp安裝打包合併最詳解,使用gulp安裝打包合併的注意事項有哪些,下面就是實戰案例,一起來看一下。

前言

# gulp是前端開發過程中對程式碼進行建構的工具,是自動化專案的建構利器;她不僅能對網站資源進行最佳化,而且在開發過程中許多重複的任務能夠使用正確的工具自動完成;使用她,我們不僅可以很愉快的編寫程式碼,而且大大提高我們的工作效率。

安裝、打包合併

# 1. 安裝node.js  下載位址:http://nodejs.cn/

# 開啟node.js 命令列,輸入: node  -v ,有版本號,則正確安裝。

2.安裝淘寶鏡像 :命令列輸入 :

npm install -g cnpm --registry=http://registry.npm.taobao.org
登入後複製

目的:使下在速度更快。

3.全域安裝gulp

cnpm install --global gulp
登入後複製

# 4.建立目錄,開啟F碟,建立gulp資料夾。

# 命令列輸入 :

f:
cd gulp
登入後複製

5.安裝本機gulp

cnpm install --save-dev gulp
登入後複製

6.建立package.json檔案

cnpm init
登入後複製

# 一路enter確定就行

7.web編輯器開啟此gulp目錄,如hbuilder、webstorm。

# 在gulp目錄下建立gulpfile.js檔案

# 8.確定何種打包壓縮,html、js、css、img

9.js打包

var gulp = require('gulp');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
 
gulp.task('default',function(){ 
 gulp.src('js/*.js') // 路径问题:gulpfile.js为路径的起点。此路径表示js文件下的所有js文件。
 .pipe(concat('all.js')) //合并成的js文件名称
 .pipe(uglify()) //压缩
 .pipe(gulp.dest('build')); //打包压缩在build目录下。
});
登入後複製

10.運行;node.js輸入

# gulp

# 會有報錯,提示 gulp-concat組件沒有安裝。開始安裝 :cnpm install gulp-concat --save-dev

# 再次運行 :gulp

再次報錯,提示gulp-uglify元件沒有安裝。開始安裝 :cnpm install gulp-uglify --save-dev

# 再次運行 :gulp

這裡會看到 finished ‘default' ,‘default' 就是gulp.task任務開始的預設入口。如果建立多個task任務,且修改任務名稱如:

var gulp = require('gulp');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
gulp.task('default',function(){ 
 gulp.src('js/*.js') // 路径问题:gulpfile.js为路径的起点。此路径表示js文件下的所有js文件。
 .pipe(concat('all.js')) //合并成的js文件名称
 .pipe(uglify()) //压缩
 .pipe(gulp.dest('build')); //打包压缩在build目录下。
})
//css 打包压缩
var autoprefix = require('gulp-autoprefixer');
var minifyCSS = require('gulp-minify-css');
  gulp.task('style', function() { //task 任务名称为style
  gulp.src('.css/*.css')
  .pipe(concat('styles.css'))
   .ipe(autoprefix('last 2 versions'))
  .pipe(minifyCSS())
  .pipe(gulp.dest('styles'))
  });
登入後複製

重新運行 : gulp

結果:

會發現只運行了 default的task任務。因為這是唯一預設的gulp執行入口。

修改如下

var gulp = require('gulp');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
 
gulp.task('js',function(){ 
 gulp.src('js/*.js') // 路径问题:gulpfile.js为路径的起点。此路径表示js文件下的所有js文件。
 .pipe(concat('all.js')) //合并成的js文件名称
 .pipe(uglify()) //压缩
 .pipe(gulp.dest('build')); //打包压缩在build目录下。
})
 
//css 打包压缩
var autoprefix = require('gulp-autoprefixer');
var minifyCSS = require('gulp-minify-css');
  gulp.task('style', function() { //task 任务名称为style
  gulp.src('.css/*.css')
  .pipe(concat('styles.css'))
  .pipe(autoprefix('last 2 versions'))
  .pipe(minifyCSS())
  .pipe(gulp.dest('styles'));
  });
<br>gulp.task('default',function(){
 gulp.run(['js','style']); //这里开始执行多个task任务
});
登入後複製

如果遇到什麼元件沒有安裝的話,想你應該知道怎麼操作了。

11.圖片壓縮

var imagemin = require('gulp-imagemin');
gulp.task('img', function() {
 return gulp.src('imgs/*.png')
 .pipe(imagemin())
 .pipe(gulp.dest('miniImg'));
});
登入後複製

12.html壓縮

var htmlmin = require('gulp-htmlmin');
gulp.task('html', function() {
 return gulp.src('../*.html')
 .pipe(htmlmin({collapseWhitespace: true}))
 .pipe(gulp.dest('../'));
});
登入後複製

13.路徑問題自己修改

gulp打包js/css時合併成一個檔案時的順序解決

# 1、可以使用插進gulp-order。

# 2.可以這樣的寫法:

return gulp.src(['js/common.js','js/**/*.js'])
.pipe(concat('build.js'))//合成到一个js
.pipe(gulp.dest(buildBasePath+'js'))//输出到js目录
.pipe(uglify())//压缩js到一行
.pipe(concat('build.min.js'))//压缩后的js
.pipe(gulp.dest(buildBasePath+'js'));//输出到js目录
登入後複製

相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!

推薦閱讀:

js和jquery如何實作自動載入圖片(附程式碼)

Vue2.0怎麼操作使用者權限

#

以上是gulp安裝+打包+合併最詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

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

AI Clothes Remover

AI Clothes Remover

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

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

Java教學
1655
14
CakePHP 教程
1413
52
Laravel 教程
1306
25
PHP教程
1252
29
C# 教程
1226
24
如何使用HTML、CSS和jQuery實現圖片合併展示的進階功能 如何使用HTML、CSS和jQuery實現圖片合併展示的進階功能 Oct 27, 2023 pm 04:36 PM

如何使用HTML、CSS和jQuery實現圖片合併展示的高級功能概述:在網頁設計中,圖片展示是一個重要的環節,而圖片合併展示是提高頁面加載速度和提升用戶體驗的常用技巧之一。本文將介紹如何使用HTML、CSS和jQuery來實現圖片合併展示的進階功能,並提供具體的程式碼範例。一、HTML佈局:首先,我們需要在HTML中建立一個容器來展示合併後的圖片。可以使用di

C++中的眾數函數詳解 C++中的眾數函數詳解 Nov 18, 2023 pm 03:08 PM

C++中的眾數函數詳解在統計學中,眾數指的是一組資料中出現次數最多的數值。在C++語言中,我們可以透過寫一個眾數函數來找出任意一組資料中的眾數。眾數函數的實作可以採用多種不同的方法,以下將詳細介紹其中兩種常用的方法。第一種方法是使用哈希表來統計每個數字出現的次數。首先,我們需要定義一個哈希表,將每個數字作為鍵,出現次數作為值。然後,對於給定的資料集,我們遍

Win11管理員權限取得詳解 Win11管理員權限取得詳解 Mar 08, 2024 pm 03:06 PM

Windows作業系統是全球最受歡迎的作業系統之一,其新版本Win11備受矚目。在Win11系統中,管理員權限的取得是一個重要的操作,管理員權限可以讓使用者對系統進行更多的操作和設定。本文將詳細介紹在Win11系統中如何取得管理員權限,以及如何有效地管理權限。在Win11系統中,管理員權限分為本機管理員和網域管理員兩種。本機管理員是指具有對本機電腦的完全管理權限

Oracle SQL中的除法運算詳解 Oracle SQL中的除法運算詳解 Mar 10, 2024 am 09:51 AM

OracleSQL中的除法運算詳解在OracleSQL中,除法運算是一種常見且重要的數學運算運算,用來計算兩個數相除的結果。除法在資料庫查詢中經常用到,因此了解OracleSQL中的除法運算及其用法是資料庫開發人員必備的技能之一。本文將詳細討論OracleSQL中除法運算的相關知識,並提供具體的程式碼範例供讀者參考。一、OracleSQL中的除法運算

C++中的取餘函式詳解 C++中的取餘函式詳解 Nov 18, 2023 pm 02:41 PM

C++中的取餘函數詳解在C++中,取餘運算子(%)用於計算兩個數相除的餘數。它是一種二元運算符,其運算元可以是任何整數型別(包括char、short、int、long等),也可以是浮點數型別(如float、double)。取餘運算子傳回的結果與被除數的符號相同。例如,對於整數的取餘運算,我們可以使用以下程式碼來實作:inta=10;intb=3;

詳解Word文件操作:將兩頁合併為一頁 詳解Word文件操作:將兩頁合併為一頁 Mar 26, 2024 am 08:18 AM

Word文件是我們日常工作和學習中使用頻率較高的應用程式之一。在處理文件時,有時會遇到需要將兩頁內容合併為一頁的情況。本文將詳細介紹在Word文件中如何將兩頁合併為一頁,幫助讀者更有效率地處理文件排版。在Word文件中,將兩頁合併為一頁的操作通常用於節省紙張和列印成本,或為了使文件更加緊湊和整潔。以下是合併兩頁為一頁的具體步驟:第一步:開啟需要操作的Word

linux系統呼叫system()函數詳解 linux系統呼叫system()函數詳解 Feb 22, 2024 pm 08:21 PM

Linux系統呼叫system()函數詳解系統呼叫是Linux作業系統中非常重要的一部分,它提供了一種與系統核心互動的方式。其中,system()函數是常用的系統呼叫函數之一。本文將詳細介紹system()函數的使用方法,並提供對應的程式碼範例。系統呼叫的基本概念系統呼叫是使用者程式與作業系統核心互動的一種方式。使用者程式透過呼叫系統呼叫函數來請求作業系統

PHP模運算子的作用及用法詳解 PHP模運算子的作用及用法詳解 Mar 19, 2024 pm 04:33 PM

PHP中的模運算子(%)是用來取得兩個數值相除的餘數的。在本文中,我們將詳細討論模運算子的作用及用法,並提供具體的程式碼範例來幫助讀者更好地理解。 1.模運算子的作用在數學中,當我們將一個整數除以另一個整數時,就會得到一個商和一個餘數。例如,當我們將10除以3時,商數為3,餘數為1。模運算子就是用來取得這個餘數的。 2.模運算子的用法在PHP中,使用%符號來表示模

See all articles