hat is gulp?

/*
gulp是前端自動化打包構建工具==> 打包：就是把文件壓縮，整合，移動，混淆

前端打包構建工具:
gulp: 基于流的打包構建工具
webpack: 基于js文件的打包構建工具

什么是流?
    流文件： 流=> 一種文件傳輸的格式=> 一段一段的文件傳輸
    流格式： 流=> 從頭到尾的一個過程=> 需要從源頭開始，一步一步經過加工，每一步驟需要上一步結果，最終得到結果
    gulp基于流格式的一種打包構建工具

gulp的依賴環境
    依賴node的環境進行開發
    底層封裝的內容就是node里面的讀寫文件
    
gulp的作用
    對于css文件=> 壓縮=> 轉碼(自動添加前綴)
    對于js文件=> 壓縮=> 轉碼(ES6轉ES5)
    對于html文件=> 壓縮=> 轉碼(對格式的轉換)
    對于靜態資源
    對于第三方文件
    ...

gulp的安裝
    https://www.gulpjs.com.cn/docs/getting-started/quick-start/
    驗證： gulp --version

gulp的卸載
    npm uninstall --global gulp
*/

gulp使用

/*
gulp使用:
1.全局安裝gulp=> 提供gulp命令的功能
2.項目依賴gulp=> 可以在gulpfile.js文件中寫gulp的構建代碼

1.新建項目目錄如下：
    1.npm init  -- 生成package.json,記錄依賴內容
    2.gulp_test
        + src -- 源碼目錄
          + css -- 樣式文件
          + js -- javascript文件
          + images -- 圖片
          + pages -- 頁面
        + gulpfile.js -- gulp文件,寫項目打包流程的

2.在項目中再安裝gulp,是以依賴的方式出現=> 提供配置打包流程API=> 每個項目都要安裝一次=> 輸入命令: npm install gulp
3.在gulpfile.js中書寫打包流程
*/

/*
package.json
dependencies=> 表示項目依賴=> 比如vue, jquery=> 指運行需要用到的內容,將來上線也需要使用的
devDependencies=> 項目開發依賴=> 比如gulp=> 項目開發階段需要用到的內容，將來上線以后不需要用到=> npm install --dev 包名(gulp)

*/

gulp常用api

/*
1.gulp.task()
語法: gulp.task("任務名稱", 任務處理函數)
作用: 創建一個基于流的任務
例子: gulp.task('htmlHandler', function() {
    // 找到html文件, 壓縮，打包 放入指定目錄
})

2.gulp.src()
語法: 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()
語法: gulp.dest(路徑信息)
作用: 把內容放入指定路徑內
例子: 
    1.gulp.dest("./abc")  -- 把內容放入到abc目錄下

4.gulp.watch()
語法: gulp.watch(路徑信息, 任務名稱)
作用: 監控指定目錄下的文件, 發生變化就執行后面的任務
例子: 
    1.gulp.dewatchst("./abc/*.html", 'htmlHandler')

5.gulp.series()
語法: gulp.series(任務1, 任務2, 任務3, ...)
作用: 逐個執行多個任務，前一個任務結束才執行后面的任務

6.gulp.parallel()
語法: gulp.parallel(任務1, 任務2, 任務3, ...)
作用: 并行開始多個任務

7.pipe()=> 管道函數=> 所有api基于流, 所以該api就是接收當前流，進入下一個流程過程=> gulp.src().pipe(壓縮).pipe(轉碼).pipe(gulp.desc('dist'))
*/

gulp插件

/*
gulp常用插件
    作用: 執行各種各樣的壓縮，混淆，轉碼任務

1.gulp-cssmin=> npm install gulp-cssmin -D=> 引入：const cssmin=require('gulp-cssmin')

2.gulp-autoprefixer=> npm install gulp-autoprefixer -D=> 作用: 自動添加前綴=> 引入: const autoprefixer=require('gulp-autoprefixer')=> 引入后得到一個處理流文件的函數,直接在管道內使用傳遞參數即可=> autoprefixer( browsers: ['last 3 version'] ) -- 主流瀏覽器最新三個版本

3.gulp-sass=> npm install gulp-sass -D=> 很容易報錯,基本下載不成功=> 因為gulp-sass依賴node-sass, node-sass下載容易失敗=> 解決: 給node-sass配置一個單獨的下載地址
        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')=> 引入后得到一個函數,直接在管道中使用即可

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 轉 ES5插件=> 引入: const babel=require('gulp-babel')=> 引入后得到一個函數,直接在管道中,需要傳遞參數.=> babel({ presets: ['@babel/env'] }) -- babel@7, presets: ['es2015']

6.gulp-htmlmin=> npm install gulp-htmlmin -D=> 作用: 刪除文件目錄=> 引入: const htmlmin=require('gulp-htmlmin')=> 引入后得到一個函數,直接使用傳遞參數即可.
    htmlHandler({
        collapseWhitespace: true, // 移除空格
        removeEmptyAttributes: true, // 移除空的屬性(僅限于原生屬性)
        collapseBooleanAttributes: true, // 移除checked類似的布爾值屬性
        removeAttributeQuotes: true, // 移除屬性上的雙引號
        minifyCSS: true, // 壓縮內嵌css代碼(只能壓縮，不能添加前綴)
        minifyJS: true, // 壓縮內線JS代碼(只能壓縮，不能轉碼)
        removeStyleLinkTypeAttributes: true, // 移除style 和 link 標簽上的type屬性
        removeScriptTypeAttributes: true, // 移除script標簽上的type屬性
    })

7.del=> npm install del -D=> 安裝指定版本: npm install del@6.0.0 -D=> 作用: 刪除文件目錄=> 引入: const del=require('del')=> 引入后得到一個函數,直接使用傳遞參數即可
    
    
8.gulp-webserver (https://www.npmjs.com/package/gulp-webserver)=> npm install gulp-webserver -D=> 作用: 啟動一個基于node的服務器=> 引入: const del=require('gulp-webserver')=> 引入后得到一個可以處理流文件函數,在管道函數中調用接口
    function webServer() {
        return gulp.src('./dist').pipe(webserver({
            host: 'localhost', // 域名
            port: 8080,
            livereload: true, // 熱加載
            path: './pages/index.html', // 默認打開一個文件(從dist目錄開始寫)
            open: true, // 自動打開
        }))
    }

9.gulp-file-include=> 作用: 在一個html頁面中導入一個html片段=> npm install gulp-file-include=> 引入: const fileInclude=require('gule-file-include')=> 引入后得到一個函數,直接在管道中使用即可，需要傳遞參數

*/


/*
// gulp3的寫法
const gulp=require("gulp")
// 導入一個css的打包任務
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;
*/

/*
想要執行上面的任務
1.打開命令行,切換到gulpfile.js文件所在目錄
2.執行命令: gulp cssHandler
*/

gulp創建默認任務

/*
由于在基于gulp構建項目的時候，需要執行多個任務，比如壓縮css，壓縮html，轉換js等多個任務.我們可以配置默認任務
配置默認任務作用就是把所有任務都一起執行了
執行gulp命令, 默認會執行默認的任務

方式1：
gulp.task('default', ()=> {})

方式2:
module.exports.default=()=> {
    cssHandler();
    jsHandler();
    htmlHandler();
    ...
}
*/

gulp啟動服務器

/*
gulp基于node環境的工具
所以gulp可以啟動一個基于node的服務器

啟動服務器基于dist目錄來做根目錄
    原因：所有的文件都會被打包到dist目錄

以下代碼通過gulp webServer啟動web服務器

*/

const webserver=require('gulp-webserver')
function webServer() {
    return gulp.src('./dist').pipe(webserver({
        host: 'localhost', // 域名
        port: 8080,
        livereload: true, // 熱加載
        path: '/',
        open: true, // 自動打開瀏覽器
        // 可配多個代理
        proxies: [
            {
                source: '/kk',
                target: 'https://tenapi.cn/douyinresou/'
            }
        ]
    }))
}

gulp監控任務

function watchHandler() {
    gulp.watch('./src/css/*.css', cssHandler)
}
// 使用gulp watchHandler啟動監控任務

gulp打包組件

/*
場景：=> 將重復的東西單獨拿出來，寫成一個html片段=> 單獨拿出來的東西可以包含css和js
        -> 也可以不包含

*/
const htmlmin=require('gulp-htmlmin')
const fileInclude=require('gulp-file-include')
function htmlHandler() {
    return gulp.src('./src/pages/*.html')
        .pipe(fileInclude({
            prefix: '#-#', // 自定義的一個標識符
            basepath: './src/components', // 基準目錄，即組件目錄
        }))
        .pipe(htmlmin({
        collapseWhitespace: true, // 移除空格
        removeEmptyAttributes: true, // 移除空的屬性(僅限于原生屬性)
        collapseBooleanAttributes: true, // 移除checked類似的布爾值屬性
        removeAttributeQuotes: true, // 移除屬性上的雙引號
        minifyCSS: true, // 壓縮內嵌css代碼(只能壓縮，不能添加前綴)
        minifyJS: true, // 壓縮內線JS代碼(只能壓縮，不能轉碼)
        removeStyleLinkTypeAttributes: true, // 移除style 和 link 標簽上的type屬性
        removeScriptTypeAttributes: true, // 移除script標簽上的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中引入方式為:
        語法: 自定義標識符include('要導入的組件文件路徑')
    -->
    #-#include('./header.html', { title: '登錄頁面' })
    <h1>hello world</h1>
    #-#include('./footer.html')
</body>
</html>

<!-- header組件 -->
<div>
    <h1>
        #-#title <!-- 此處就可以引用到上面的title的值 -->
    </h1>
    header
</div>

<!-- footer組件 -->
<div>
    footer
</div>

gulp的demo

ulp 前端項目構建工具，用來處理css，js，圖片壓縮等，編譯less和scss以及coffeeScript等，提高開發效率。gulp是基于NodeJs而NodeJs又是基于CommonJs的，所以我們要想使用gulp需要先安裝NodeJs。運行如下兩條命令來查看是否安裝成功。

npm是node包管理工具，隨著node自動安裝

gulp安裝

淘寶鏡像安裝 npm install -g cnpm --registry=https://registry.npm.taobao.org

1.全局安裝gulp

npm install --global gulp

2.局部安裝gulp

創建一個項目，我這里叫mygulp，然后cmd命令進入到此目錄文件夾，輸入

npm init

此時會發現項目目錄下多了一個package.json文件

之后執行以下命令來初始化我們剛創建好的項目

npm install --save-dev gulp

在項目根目錄創建gulpfile.js文件，先在gulpfile.js文件創建一個任務，看能否運行成功

然后在cmd命令行輸入gulp task1

執行多個任務，gulp.task('default',gulp.series['task1','task2']);

gulp的常用功能：

1.復制加移動文件

任務：要程序把index.html文件復制一份到app文件夾下

gulpfile.js

然后執行gulp task3，看到執行結果：

2.創建webServer

• 下載gulp-webServer npm install - -save-dev gulp-webserver

在node_modules文件夾中有gulp-webserver文件夾證明已經安裝成功

• 在gulpfile.js中引入gulp-webServer

var server=require("gulp-webServer");

放在瀏覽器上效果圖：

而且保存的時候可以實現同步刷新

3.合并和壓縮js文件

npm install - -save-dev gulp-concat

npm install - -save-dev gulp-uglify

然后在gulpfile.js里面輸入如下代碼，來合并多個js文件

var concat=require("gulp-concat");

效果如圖：

壓縮js文件

修改剛才的合并代碼如下，其中pipe叫做管道符：

然后我們再看scipt.js里面的效果

4.編譯sass到css

less

sass box color:red 不是咱們平常寫css的習慣，所以scss就應運而生

scss box{color:red;}

npm install - -save-dev gulp-sass

然后我們創建scss文件夾，再在里面新建一個a.scss文件，a.scss內容如下：

在gulpfile.js里面編寫如下內容

這時我們會看到項目里自動生成了一個新的css文件夾里面有了新的a.css文件

5.css的合并和壓縮

合并gulp-concat 壓縮 gulp-minifiy-css

cnpm install gulp-minify-css --save-dev 也可以用npm install gulp-minify-css --save-dev 哪個能用就用哪個

之后我們來合并以及壓縮css文件夾里的a.css和b.css

別忘記先引入gulp-minify-css

var cssmin=require('gulp-minify-css');

壓縮后生產style.css如下：

6.壓縮圖片

在cmd中運行 cnpm install gulp-imagemin --save-dev因為我們已經采用淘寶鏡像替換掉了npm，所以以后的安裝都可以采用cnpm來安裝

如果想深度壓縮圖片還需要在cmd中運行 cnpm install imagemin-pngquant --save-dev這個時候我們看package.json文件，發現都已經安裝成功

在項目里新建一個image文件夾，里面放上一張圖片，然后在gulpfile.js里面進行配置如下：別忘了先引入：var imagemin=require('gulp-imagemin');

之后我們看到項目里自動生成了img文件夾，并且里面有壓縮好的圖片

但是壓縮完之后，兩張圖片的大小并沒有多大的改變，現在我們可以進行深度壓縮

還是 別忘了先引入var pngquant=require('imagemin-pngquant');

然后配置任務如下：

這時gulp項目生成了一個新的文件夾dist/img下有剛剛壓縮過的圖片