搜尋
首頁web前端js教程gulp安裝以及打包合併詳解
gulp安裝以及打包合併詳解Jan 18, 2018 am 10:48 AM
gulp合併打包

本文主要為大家介紹了關於gulp實作人一個打包合併的方法教程,並分享了gulp打包js/css時合併成一個檔案時的順序的解決方法,文中透過範例程式碼介紹的非常詳細,需要的朋友可以參考借鑒,下面隨著小編來一起學習學習吧。希望能幫助大家。

前言

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文件,gulp運行的入口


#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'))
 
  .pipe(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目录

相關推薦:

#Gulp實作靜態網頁模組化實例分享

詳解nodejs實作簡單的gulp打包

如何實作使用gulp實作檔案壓縮及瀏覽器的熱載入

#

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

陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
如何在C语言中合并两个数组?如何在C语言中合并两个数组?Sep 10, 2023 am 09:05 AM

将两个数组作为输入,尝试合并或连接两个数组并将结果存储在第三个数组中。合并两个数组的逻辑如下所示-J=0,k=0for(i=0;i<o;i++){//mergingtwoarrays&nbsp;&nbsp;if(a[j]<=b[k]){&nbsp;&nbsp;&nbsp;c[i]=a[j];&nbsp;&nbsp;&nbsp;j++;&nbsp;&nbsp;}else{&nbsp;&nbs

2.4g和5g要不要合并2.4g和5g要不要合并Nov 24, 2022 am 10:27 AM

2.4g和5g不建议合并;因为双频合一有利有弊,部分手机可能连接双频合一的wifi比较困难;对于一般的无线路由器如果没有弱信号剔除功能,那么开启双频合一后手机可能一直连着2.4G频段,根本不会切换到速率更快的2.4G频段,除非手动开关WIFI,因此建议分开设置。

如何使用HTML、CSS和jQuery实现图片合并展示的高级功能如何使用HTML、CSS和jQuery实现图片合并展示的高级功能Oct 27, 2023 pm 04:36 PM

如何使用HTML、CSS和jQuery实现图片合并展示的高级功能概述:在网页设计中,图片展示是一个重要的环节,而图片合并展示是提高页面加载速度和提升用户体验的常用技巧之一。本文将介绍如何使用HTML、CSS和jQuery来实现图片合并展示的高级功能,并提供具体的代码示例。一、HTML布局:首先,我们需要在HTML中创建一个容器来展示合并后的图片。可以使用di

如何使用Java中的SequenceInputStream函数合并输入流如何使用Java中的SequenceInputStream函数合并输入流Jun 26, 2023 pm 03:03 PM

在Java开发中,我们常常需要合并多个输入流来处理数据。而SequenceInputStream函数就是Java中提供的用于合并输入流的函数之一,它可以将多个输入流合并成一个更大的输入流,方便我们进行数据处理。那么,如何使用Java中的SequenceInputStream函数来实现输入流的合并呢?接下来,本文将通过详细的步骤介绍其具体实现方法和注意事项。I

快速上手:Java中的JSON数组合并和拆分技巧。快速上手:Java中的JSON数组合并和拆分技巧。Sep 06, 2023 am 10:21 AM

快速上手:Java中的JSON数组合并和拆分技巧在现代的软件开发中,数据的格式和传输变得愈发重要。其中,JSON(JavaScriptObjectNotation)是一种常用的数据格式,特别适用于前后端交互和数据存储。在Java开发中,我们经常需要处理JSON对象和JSON数组。本文将介绍如何在Java中合并和拆分JSON数组,以及实现这些操作的技巧和示

如何使用Python正则表达式进行代码打包和分发如何使用Python正则表达式进行代码打包和分发Jun 23, 2023 am 09:31 AM

随着Python编程语言的日益流行,越来越多的开发者开始使用Python编写代码。但是在实际使用中,我们常常需要将这些代码打包并分发给其他人使用。本文将介绍如何使用Python正则表达式进行代码打包和分发。一、Python代码打包在Python中,我们可以使用setuptools和distutils等工具来打包我们的代码。这些工具可以将Python文件、模块

如何使用Python中的Pandas按特定列合并两个CSV文件?如何使用Python中的Pandas按特定列合并两个CSV文件?Sep 08, 2023 pm 02:01 PM

CSV(逗号分隔值)文件广泛用于以简单格式存储和交换数据。在许多数据处理任务中,需要基于特定列合并两个或多个CSV文件。幸运的是,这可以使用Python中的Pandas库轻松实现。在本文中,我们将学习如何使用Python中的Pandas按特定列合并两个CSV文件。什么是Pandas库?Pandas是一个用于Python信息控制和检查的开源库。它提供了用于处理结构化数据(例如表格、时间序列和多维数据)以及高性能数据结构的工具。Pandas广泛应用于金融、数据科学、机器学习和其他需要数据操作的领域。

怎么使用pkg将Node.js项目打包为可执行文件?怎么使用pkg将Node.js项目打包为可执行文件?Jul 26, 2022 pm 07:33 PM

如何用pkg打包nodejs可执行文件?下面本篇文章给大家介绍一下使用pkg将Node.js项目打包为可执行文件的方法,希望对大家有所帮助!

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

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

AI Clothes Remover

AI Clothes Remover

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

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
3 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳圖形設置
3 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您聽不到任何人,如何修復音頻
3 週前By尊渡假赌尊渡假赌尊渡假赌

熱工具

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

強大的PHP整合開發環境

EditPlus 中文破解版

EditPlus 中文破解版

體積小,語法高亮,不支援程式碼提示功能

MantisBT

MantisBT

Mantis是一個易於部署的基於Web的缺陷追蹤工具,用於幫助產品缺陷追蹤。它需要PHP、MySQL和一個Web伺服器。請查看我們的演示和託管服務。

SublimeText3 Linux新版

SublimeText3 Linux新版

SublimeText3 Linux最新版

mPDF

mPDF

mPDF是一個PHP庫,可以從UTF-8編碼的HTML產生PDF檔案。原作者Ian Back編寫mPDF以從他的網站上「即時」輸出PDF文件,並處理不同的語言。與原始腳本如HTML2FPDF相比,它的速度較慢,並且在使用Unicode字體時產生的檔案較大,但支援CSS樣式等,並進行了大量增強。支援幾乎所有語言,包括RTL(阿拉伯語和希伯來語)和CJK(中日韓)。支援嵌套的區塊級元素(如P、DIV),