整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
裝 gulp
在 cmd 中輸入命令全局安裝 gulp
sudo npm install -g gulp
安裝完成后再輸入檢查是否安裝成功
npm install --save-dev gulp
在項(xiàng)目根目錄下創(chuàng)建一個(gè)名為 gulpfile.js 的文件
var gulp=require('gulp');
gulp.task('default', function() {
// 將你的默認(rèn)的任務(wù)代碼放在這
});
安裝依賴
現(xiàn)在，我們需要執(zhí)行哪些任務(wù)，安裝對(duì)應(yīng)依賴的組件包。
編譯 sass（或者 less）文件
壓縮 js 文件
監(jiān)聽文件變更
npm install --save-dev gulp-sass gulp-uglify
（ 注意： npm install –save-dev (依賴包名) 下載的是最新版本的 ）
修改 gulpfile.js 文件
gulp 有5個(gè)方法：task，run，watch，src，dest，粘貼下面的代碼到 gulpfile.js 里
// 引入 gulp
var gulp=require('gulp');
// 引入依賴的組件包
var sass=require('gulp-sass');
var uglify=require('gulp-uglify');
// 編譯 sass
gulp.task('sass', function() {
gulp.src('./scss/*.scss')
.pipe(sass())
.pipe(gulp.dest('./css'));
});
// 壓縮 js
gulp.task('uglify', function () {
gulp.src('./js-build/*.js')
.pipe(uglify())
.pipe(gulp.dest('./js'));
});
// 默認(rèn)任務(wù)
gulp.task('default', function () {
// 運(yùn)行默認(rèn)需要執(zhí)行的任務(wù)
gulp.run('sass', 'uglify');
// 監(jiān)聽文件的變化
gulp.watch(['./scss/*.scss', './js-build/*.js'], function () {
// 執(zhí)行文件變更后需要做的任務(wù)
gulp.run('sass', 'uglify');
})
});
目錄
1、任務(wù)的名字可以換成你想要的名字
gulp.task('sass')
2、gulpfile.js中定義的任意任務(wù)可以單獨(dú)運(yùn)行，例如命令行輸入
gulp sass
完整目錄
本文內(nèi)容均屬個(gè)人原創(chuàng)作品，轉(zhuǎn)載此文章須附上出處及原文鏈接。
加關(guān)注，定時(shí)推送，互動(dòng)精彩多，若你有更好的見解，歡迎留言探討！
/*
gulp是前端自動(dòng)化打包構(gòu)建工具==> 打包：就是把文件壓縮，整合，移動(dòng)，混淆
前端打包構(gòu)建工具:
gulp: 基于流的打包構(gòu)建工具
webpack: 基于js文件的打包構(gòu)建工具
什么是流?
流文件： 流=> 一種文件傳輸?shù)母袷?> 一段一段的文件傳輸
流格式： 流=> 從頭到尾的一個(gè)過(guò)程=> 需要從源頭開始，一步一步經(jīng)過(guò)加工，每一步驟需要上一步結(jié)果，最終得到結(jié)果
gulp基于流格式的一種打包構(gòu)建工具
gulp的依賴環(huán)境
依賴node的環(huán)境進(jìn)行開發(fā)
底層封裝的內(nèi)容就是node里面的讀寫文件
gulp的作用
對(duì)于css文件=> 壓縮=> 轉(zhuǎn)碼(自動(dòng)添加前綴)
對(duì)于js文件=> 壓縮=> 轉(zhuǎn)碼(ES6轉(zhuǎn)ES5)
對(duì)于html文件=> 壓縮=> 轉(zhuǎn)碼(對(duì)格式的轉(zhuǎn)換)
對(duì)于靜態(tài)資源
對(duì)于第三方文件
...
gulp的安裝
https://www.gulpjs.com.cn/docs/getting-started/quick-start/
驗(yàn)證： gulp --version
gulp的卸載
npm uninstall --global gulp
*//*
gulp使用:
1.全局安裝gulp=> 提供gulp命令的功能
2.項(xiàng)目依賴gulp=> 可以在gulpfile.js文件中寫gulp的構(gòu)建代碼
1.新建項(xiàng)目目錄如下：
1.npm init -- 生成package.json,記錄依賴內(nèi)容
2.gulp_test
+ src -- 源碼目錄
+ css -- 樣式文件
+ js -- javascript文件
+ images -- 圖片
+ pages -- 頁(yè)面
+ gulpfile.js -- gulp文件,寫項(xiàng)目打包流程的
2.在項(xiàng)目中再安裝gulp,是以依賴的方式出現(xiàn)=> 提供配置打包流程API=> 每個(gè)項(xiàng)目都要安裝一次=> 輸入命令: npm install gulp
3.在gulpfile.js中書寫打包流程
*/
/*
package.json
dependencies=> 表示項(xiàng)目依賴=> 比如vue, jquery=> 指運(yùn)行需要用到的內(nèi)容,將來(lái)上線也需要使用的
devDependencies=> 項(xiàng)目開發(fā)依賴=> 比如gulp=> 項(xiàng)目開發(fā)階段需要用到的內(nèi)容，將來(lái)上線以后不需要用到=> npm install --dev 包名(gulp)
*//*
1.gulp.task()
語(yǔ)法: gulp.task("任務(wù)名稱", 任務(wù)處理函數(shù))
作用: 創(chuàng)建一個(gè)基于流的任務(wù)
例子: gulp.task('htmlHandler', function() {
// 找到html文件, 壓縮，打包 放入指定目錄
})
2.gulp.src()
語(yǔ)法: gulp.src(路徑信息)
作用: 找到源文件
例子:
1.gulp.src("./a/b.html")
2.gulp.src("./a/*.html")
3.gulp.src("./a/**") 指定目錄下所有文件
4.gulp.src("./a/**\/*") 指定a目錄下所有子目錄里面的所有文件
3.gulp.dest()
語(yǔ)法: gulp.dest(路徑信息)
作用: 把內(nèi)容放入指定路徑內(nèi)
例子:
1.gulp.dest("./abc") -- 把內(nèi)容放入到abc目錄下
4.gulp.watch()
語(yǔ)法: gulp.watch(路徑信息, 任務(wù)名稱)
作用: 監(jiān)控指定目錄下的文件, 發(fā)生變化就執(zhí)行后面的任務(wù)
例子:
1.gulp.dewatchst("./abc/*.html", 'htmlHandler')
5.gulp.series()
語(yǔ)法: gulp.series(任務(wù)1, 任務(wù)2, 任務(wù)3, ...)
作用: 逐個(gè)執(zhí)行多個(gè)任務(wù)，前一個(gè)任務(wù)結(jié)束才執(zhí)行后面的任務(wù)
6.gulp.parallel()
語(yǔ)法: gulp.parallel(任務(wù)1, 任務(wù)2, 任務(wù)3, ...)
作用: 并行開始多個(gè)任務(wù)
7.pipe()=> 管道函數(shù)=> 所有api基于流, 所以該api就是接收當(dāng)前流，進(jìn)入下一個(gè)流程過(guò)程=> gulp.src().pipe(壓縮).pipe(轉(zhuǎn)碼).pipe(gulp.desc('dist'))
*//*
gulp常用插件
作用: 執(zhí)行各種各樣的壓縮，混淆，轉(zhuǎn)碼任務(wù)
1.gulp-cssmin=> npm install gulp-cssmin -D=> 引入：const cssmin=require('gulp-cssmin')
2.gulp-autoprefixer=> npm install gulp-autoprefixer -D=> 作用: 自動(dòng)添加前綴=> 引入: const autoprefixer=require('gulp-autoprefixer')=> 引入后得到一個(gè)處理流文件的函數(shù),直接在管道內(nèi)使用傳遞參數(shù)即可=> autoprefixer( browsers: ['last 3 version'] ) -- 主流瀏覽器最新三個(gè)版本
3.gulp-sass=> npm install gulp-sass -D=> 很容易報(bào)錯(cuò),基本下載不成功=> 因?yàn)間ulp-sass依賴node-sass, node-sass下載容易失敗=> 解決: 給node-sass配置一個(gè)單獨(dú)的下載地址
1.set SASS_BINARY_SITE=https://npm.taobao.org/mirrors/node-sass/
2.npm install node-sass -D
3.npm install gulp-sass -D=> const sass=require('gulp-sass')
4.gulp-uglify=> npm install gulp-uglify -D=> 作用: 壓縮js文件=> 引入: const uglify=require('gulp-uglify')=> 引入后得到一個(gè)函數(shù),直接在管道中使用即可
5.gulp-babel=> 版本
-> gulp-babel@7 -- gulp@3
-> gulp-babel@8 -- gulp@4=> npm install gulp-babel -D
-> 依賴： @babel/core, @babel/preset-env
-> npm install @babel/core -D
-> npm install @babel/preset-env -D=> 作用: ES6 轉(zhuǎn) ES5插件=> 引入: const babel=require('gulp-babel')=> 引入后得到一個(gè)函數(shù),直接在管道中,需要傳遞參數(shù).=> babel({ presets: ['@babel/env'] }) -- babel@7, presets: ['es2015']
6.gulp-htmlmin=> npm install gulp-htmlmin -D=> 作用: 刪除文件目錄=> 引入: const htmlmin=require('gulp-htmlmin')=> 引入后得到一個(gè)函數(shù),直接使用傳遞參數(shù)即可.
htmlHandler({
collapseWhitespace: true, // 移除空格
removeEmptyAttributes: true, // 移除空的屬性(僅限于原生屬性)
collapseBooleanAttributes: true, // 移除checked類似的布爾值屬性
removeAttributeQuotes: true, // 移除屬性上的雙引號(hào)
minifyCSS: true, // 壓縮內(nèi)嵌css代碼(只能壓縮，不能添加前綴)
minifyJS: true, // 壓縮內(nèi)線JS代碼(只能壓縮，不能轉(zhuǎn)碼)
removeStyleLinkTypeAttributes: true, // 移除style 和 link 標(biāo)簽上的type屬性
removeScriptTypeAttributes: true, // 移除script標(biāo)簽上的type屬性
})
7.del=> npm install del -D=> 安裝指定版本: npm install del@6.0.0 -D=> 作用: 刪除文件目錄=> 引入: const del=require('del')=> 引入后得到一個(gè)函數(shù),直接使用傳遞參數(shù)即可
8.gulp-webserver (https://www.npmjs.com/package/gulp-webserver)=> npm install gulp-webserver -D=> 作用: 啟動(dòng)一個(gè)基于node的服務(wù)器=> 引入: const del=require('gulp-webserver')=> 引入后得到一個(gè)可以處理流文件函數(shù),在管道函數(shù)中調(diào)用接口
function webServer() {
return gulp.src('./dist').pipe(webserver({
host: 'localhost', // 域名
port: 8080,
livereload: true, // 熱加載
path: './pages/index.html', // 默認(rèn)打開一個(gè)文件(從dist目錄開始寫)
open: true, // 自動(dòng)打開
}))
}
9.gulp-file-include=> 作用: 在一個(gè)html頁(yè)面中導(dǎo)入一個(gè)html片段=> npm install gulp-file-include=> 引入: const fileInclude=require('gule-file-include')=> 引入后得到一個(gè)函數(shù),直接在管道中使用即可，需要傳遞參數(shù)
*/
/*
// gulp3的寫法
const gulp=require("gulp")
// 導(dǎo)入一個(gè)css的打包任務(wù)
const cssmin=require('gulp-cssmin')
gulp.task('cssHandler', function() {
return gulp.src('./src/css/*.css').pipe(cssmin()).pipe(gulp.dest('./dist/css'))
})
*/
/*
// gulp4的寫法
const cssmin=require('gulp-cssmin')
function cssHandler() {
return gulp.src('./src/css/*.css').pipe(cssmin()).pipe(gulp.dest('./dist/css'))
}
module.exports.cssHandler=cssHandler;
*/
/*
想要執(zhí)行上面的任務(wù)
1.打開命令行,切換到gulpfile.js文件所在目錄
2.執(zhí)行命令: gulp cssHandler
*//*
由于在基于gulp構(gòu)建項(xiàng)目的時(shí)候，需要執(zhí)行多個(gè)任務(wù)，比如壓縮css，壓縮html，轉(zhuǎn)換js等多個(gè)任務(wù).我們可以配置默認(rèn)任務(wù)
配置默認(rèn)任務(wù)作用就是把所有任務(wù)都一起執(zhí)行了
執(zhí)行g(shù)ulp命令, 默認(rèn)會(huì)執(zhí)行默認(rèn)的任務(wù)
方式1：
gulp.task('default', ()=> {})
方式2:
module.exports.default=()=> {
cssHandler();
jsHandler();
htmlHandler();
...
}
*//*
gulp基于node環(huán)境的工具
所以gulp可以啟動(dòng)一個(gè)基于node的服務(wù)器
啟動(dòng)服務(wù)器基于dist目錄來(lái)做根目錄
原因：所有的文件都會(huì)被打包到dist目錄
以下代碼通過(guò)gulp webServer啟動(dòng)web服務(wù)器
*/
const webserver=require('gulp-webserver')
function webServer() {
return gulp.src('./dist').pipe(webserver({
host: 'localhost', // 域名
port: 8080,
livereload: true, // 熱加載
path: '/',
open: true, // 自動(dòng)打開瀏覽器
// 可配多個(gè)代理
proxies: [
{
source: '/kk',
target: 'https://tenapi.cn/douyinresou/'
}
]
}))
}function watchHandler() {
gulp.watch('./src/css/*.css', cssHandler)
}
// 使用gulp watchHandler啟動(dòng)監(jiān)控任務(wù)/*
場(chǎng)景：=> 將重復(fù)的東西單獨(dú)拿出來(lái)，寫成一個(gè)html片段=> 單獨(dú)拿出來(lái)的東西可以包含css和js
-> 也可以不包含
*/
const htmlmin=require('gulp-htmlmin')
const fileInclude=require('gulp-file-include')
function htmlHandler() {
return gulp.src('./src/pages/*.html')
.pipe(fileInclude({
prefix: '#-#', // 自定義的一個(gè)標(biāo)識(shí)符
basepath: './src/components', // 基準(zhǔn)目錄，即組件目錄
}))
.pipe(htmlmin({
collapseWhitespace: true, // 移除空格
removeEmptyAttributes: true, // 移除空的屬性(僅限于原生屬性)
collapseBooleanAttributes: true, // 移除checked類似的布爾值屬性
removeAttributeQuotes: true, // 移除屬性上的雙引號(hào)
minifyCSS: true, // 壓縮內(nèi)嵌css代碼(只能壓縮，不能添加前綴)
minifyJS: true, // 壓縮內(nèi)線JS代碼(只能壓縮，不能轉(zhuǎn)碼)
removeStyleLinkTypeAttributes: true, // 移除style 和 link 標(biāo)簽上的type屬性
removeScriptTypeAttributes: true, // 移除script標(biāo)簽上的type屬性
})).pipe(gulp.dest('./dist/pages'))
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/login.js"></script>
</head>
<body>
<!--
在html中引入方式為:
語(yǔ)法: 自定義標(biāo)識(shí)符include('要導(dǎo)入的組件文件路徑')
-->
#-#include('./header.html', { title: '登錄頁(yè)面' })
<h1>hello world</h1>
#-#include('./footer.html')
</body>
</html>
<!-- header組件 -->
<div>
<h1>
#-#title <!-- 此處就可以引用到上面的title的值 -->
</h1>
header
</div>
<!-- footer組件 -->
<div>
footer
</div>ulp 前端項(xiàng)目構(gòu)建工具，用來(lái)處理css，js，圖片壓縮等，編譯less和scss以及coffeeScript等，提高開發(fā)效率。gulp是基于NodeJs而NodeJs又是基于CommonJs的，所以我們要想使用gulp需要先安裝NodeJs。運(yùn)行如下兩條命令來(lái)查看是否安裝成功。
npm是node包管理工具，隨著node自動(dòng)安裝
gulp安裝
淘寶鏡像安裝 npm install -g cnpm --registry=https://registry.npm.taobao.org
1.全局安裝gulp
npm install --global gulp
2.局部安裝gulp
創(chuàng)建一個(gè)項(xiàng)目，我這里叫mygulp，然后cmd命令進(jìn)入到此目錄文件夾，輸入
npm init
此時(shí)會(huì)發(fā)現(xiàn)項(xiàng)目目錄下多了一個(gè)package.json文件
之后執(zhí)行以下命令來(lái)初始化我們剛創(chuàng)建好的項(xiàng)目
npm install --save-dev gulp
cmd命令行
在項(xiàng)目根目錄創(chuàng)建gulpfile.js文件，先在gulpfile.js文件創(chuàng)建一個(gè)任務(wù)，看能否運(yùn)行成功
然后在cmd命令行輸入gulp task1
執(zhí)行多個(gè)任務(wù)，gulp.task('default',gulp.series['task1','task2']);
gulp的常用功能：
1.復(fù)制加移動(dòng)文件
任務(wù)：要程序把index.html文件復(fù)制一份到app文件夾下
項(xiàng)目結(jié)構(gòu)
gulpfile.js
然后執(zhí)行gulp task3，看到執(zhí)行結(jié)果：
2.創(chuàng)建webServer
在node_modules文件夾中有g(shù)ulp-webserver文件夾證明已經(jīng)安裝成功
var server=require("gulp-webServer");
cmd命令行
放在瀏覽器上效果圖：
localhost:80
而且保存的時(shí)候可以實(shí)現(xiàn)同步刷新
3.合并和壓縮js文件
npm install - -save-dev gulp-concat
npm install - -save-dev gulp-uglify
package.json里面有這個(gè)文件，證明已經(jīng)安裝成功
然后在gulpfile.js里面輸入如下代碼，來(lái)合并多個(gè)js文件
var concat=require("gulp-concat");
新建js文件夾，里面放兩個(gè)js
gulpfile.js
效果如圖：
壓縮js文件
修改剛才的合并代碼如下，其中pipe叫做管道符：
然后我們?cè)倏磗cipt.js里面的效果
4.編譯sass到css
less
sass box color:red 不是咱們平常寫css的習(xí)慣，所以scss就應(yīng)運(yùn)而生
scss box{color:red;}
npm install - -save-dev gulp-sass
package.json查看是否安裝成功
然后我們創(chuàng)建scss文件夾，再在里面新建一個(gè)a.scss文件，a.scss內(nèi)容如下：
在gulpfile.js里面編寫如下內(nèi)容
這時(shí)我們會(huì)看到項(xiàng)目里自動(dòng)生成了一個(gè)新的css文件夾里面有了新的a.css文件
5.css的合并和壓縮
合并gulp-concat 壓縮 gulp-minifiy-css
cnpm install gulp-minify-css --save-dev 也可以用npm install gulp-minify-css --save-dev 哪個(gè)能用就用哪個(gè)
之后我們來(lái)合并以及壓縮css文件夾里的a.css和b.css
別忘記先引入gulp-minify-css
var cssmin=require('gulp-minify-css');
gulpfile.js文件
壓縮后生產(chǎn)style.css如下：
style.css
6.壓縮圖片
在cmd中運(yùn)行 cnpm install gulp-imagemin --save-dev因?yàn)槲覀円呀?jīng)采用淘寶鏡像替換掉了npm，所以以后的安裝都可以采用cnpm來(lái)安裝
如果想深度壓縮圖片還需要在cmd中運(yùn)行 cnpm install imagemin-pngquant --save-dev這個(gè)時(shí)候我們看package.json文件，發(fā)現(xiàn)都已經(jīng)安裝成功
在項(xiàng)目里新建一個(gè)image文件夾，里面放上一張圖片，然后在gulpfile.js里面進(jìn)行配置如下：別忘了先引入：var imagemin=require('gulp-imagemin');
gulpfile.js文件
之后我們看到項(xiàng)目里自動(dòng)生成了img文件夾，并且里面有壓縮好的圖片
項(xiàng)目結(jié)構(gòu)
但是壓縮完之后，兩張圖片的大小并沒有多大的改變，現(xiàn)在我們可以進(jìn)行深度壓縮
還是 別忘了先引入var pngquant=require('imagemin-pngquant');
然后配置任務(wù)如下：
這時(shí)gulp項(xiàng)目生成了一個(gè)新的文件夾dist/img下有剛剛壓縮過(guò)的圖片
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
