【gulp】前端自動化工具---gulp的使用（一）------【巷子】

時間 2019-11-09

原文原文鏈接

什麼是gulp？

基於node的自動化構建工具

擴展：開發的時候分爲2個節點一個是開發階段另外一個是部署階段

開發階段：源文件不會被壓縮

部署階段：全部文件須要壓縮

002、gulp能幹什麼？

1 自動壓縮JS文件

2 自動壓縮CSS文件

3 自動合併文件

4 自動編譯sass

5 自動壓縮圖片

6 自動刷新瀏覽器

...........

003、怎麼安裝gulp？

由於它基於nodeJS，所以須要先安裝node環境

安裝完成後，打開你的命令行窗口

輸入： node -v

檢測一下node是否安裝好了

004、npm

npm:

nodejs的包管理器

使用npm安裝插件命令

：npm install <name> -g 全局安裝

：npm install <name> --save-dev：局部安裝

因爲網絡常常很差，考慮把npm換成cnpm，可使用淘寶提供的鏡像服務器

npm install -g cnpm --registry=https://registry.npm.taobao.org

裝完查看版本，驗證是否安裝正確

cnpm -v

005、初始化文件夾

　　 npm init

　　做用：初始化一個gulp環境建立一個package.json文件

006、局部安裝gulp

　　　　 npm install <name> --save-dev：局部安裝

--save：將保存配置信息至package.json

-dev：保存至package.json的devDependencies節點

這個過程須要等待一小會。能夠先喝口水解解渴

007、新建gulpfile文件(重要)

　　gulpfile.js是gulp項目的配置文件，是位於項目根目錄的普通js文件

　　gulpfile package node_modules 三個文件通常放在一塊兒

008、添加部署文件

一、輸入源

輸入源(操做的文件路徑) gulp.src(文件路徑)

src方法是指定須要處理的源文件的路徑，gulp借鑑了Unix操做系統的管道（pipe）思想，前一級的輸出，直接變成後一級的輸入，gulp.src返回當前文件流至可用插件

文件路徑設置：

a、單個文件夾:"src/js/index.js";

b、匹配全部文件:"*" 例：src/*.js --->src下面全部的js文件

c、匹配0個或多個子文件夾："**" 例如：scr/**/*.js--->src下面的0個或者多個子文件夾的js文件

d、匹配多個屬性：{} 例如：src/{a,b}.js--->src下面的a.js和b.js src/*.{jpg,png,gif}--->src下面全部的jpg png gif文件

e、排除文件：！例如: !scr.a.js--->排除src下面的a.js文件

　　二、經過管道進行輸入

　　管道：pipe()

　　三、輸出源：參數是將文件輸出到哪

　　 dest()

　　栗子：

009、拷貝多個文件

010、合併文件

gulp高級javascript

001、圖片壓縮

安裝插件cnpm install gulp-imagemin --save-dev
　　         yarn add gulp-imagemin --dev

002、js壓縮

命令行安裝 cnpm install gulp-uglify --save-dev

003、編譯sass及壓縮css
cnpm install gulp-sass-china --save-dev

004、監聽

雖然以上能夠將sass編譯和壓縮可是若是在sass裏面編寫文件 css裏面的文件不會改變的！而須要每次都去終端中運行。特別麻煩

首先監聽不可以單獨存在必須配合任務一塊兒使用

005、服務器

命令行安裝 cnpm install gulp-connect --save-dev

參數：

root:設置目錄

port:端口號

livereload:當設置爲true的時候，gulp會自動檢測文件的變化而後自動進行源碼構建

006、自動刷新

007、合併文件插件gulp-concat
命令行安裝 cnpm install gulp-concat --save-dev

在gulpfile.js 中

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

gulp.task('scripts',function(){

gulp.src(['javascripts/avalon.js','javascripts/index.js'])

.pipe(concat('vendor.js'))

.pipe(gulp.dest('dist/js'));

})

00八、轉義ES6 gulp-babel

cnpm install --save-dev gulp-babel @babel/core @babel/preset-env

const gulp = require('gulp');
const babel = require('gulp-babel');

gulp.task('babel', () =>
　　gulp.src('src/es6.js')
　　.pipe(babel({
　　　　presets: ['@babel/env']
　　}))
　　.pipe(gulp.dest('dist'))
);css

00九、http-proxy-middleware實現正向代理java

const connect = require("gulp-connect");

const proxy = require("http-proxy-middleware");

gulp.task("connect",function(){
    connect.server({
        root:"src",
        port:7744,
        livereload:true,
        middleware: function() {
            return [
　　　　　　　　　　//須要轉發的請求
                proxy('/v4',{
　　　　　　　　　　　　//代理服務器的路徑(協議+主機名)
                    target: 'https://m.maizuo.com',
　　　　　　　　　　　　　是否改變原始主機頭爲目標url
                    changeOrigin: true,
                }),
                proxy('/restapi',{
                    target: 'https://h5.ele.me',
                    changeOrigin: true,
                })
            ]
        }
    })
})