標籤: 銷售文案

一、初始化

首先先做一個項目初始化，用來記錄你項目中用到的工具

再你項目文件下打開一個控制台，輸入命令 yarn init -y 進行初始化

 

輸入命令yarn add gulp -g  — 全局安裝gulp，這裏我提前已經安裝過了就不演示了，然後再輸入命令yarn add gulp -S 局部安裝，都安裝完成過後輸入命令 gulp -v，如果出現兩個版本號，就代表都安裝成功了

 

接着在你的項目文件夾下新建一個文件名為 gulpFile.js js文件，名字必須叫這個，官方規定的，用來寫gulp命令

 

好了，可以開始安裝壓縮工具進行壓縮了

 

 

 二、html壓縮

 

 安裝html壓縮工具，輸入命令 

yarn add gulp-htmlmin -D

安裝壓縮html的工具，安裝到開發環境，生產環境用不到

安裝完成過後打開初始化時生成的文件 package.json，開發環境有沒有你剛安裝的 gulp-htmlmin

 

 

 

 

 

 

 打開開始建的 gulpFile.js 文件，開始寫命令

const gulp = require('gulp') //引入gulp
const htmlmin = require('gulp-htmlmin') //引入html壓縮模塊
const path = { //方便管理路徑
    html: {
        src: 'src/**/*.html',
        dest: 'dist'
    }
}
gulp.task('html', () => { //創建任務，並命名任務名
    /*一個*表示所有文件，兩個*表示所有目錄*/
    return gulp.src(path.html.src) //打開讀取文件
        .pipe(htmlmin({
            removeComments: true, //清除HTML註釋
            collapseWhitespace: true, //壓縮HTML
            collapseBooleanAttributes: true, //省略布爾屬性的值 <input checked="true"/> ==> <input checked />
            removeEmptyAttributes: true, //刪除所有空格作屬性值 <input id="" /> ==> <input />
            removeScriptTypeAttributes: false, //刪除<script>的type="text/javascript"
            removeStyleLinkTypeAttributes: true, //刪除<style>和<link>的type="text/css"
            minifyJS: true, //壓縮頁面JS
            minifyCSS: true //壓縮頁面CSS
        })) //管道流操作，壓縮文件
        .pipe(gulp.dest(path.html.dest)) //指定壓縮文件放置的目錄
})

然後輸入命令

gulp html

執行壓縮

 

 

 像這樣就壓縮成功了

上面是 gulp3 寫法，gulp4 寫法：

const gulp = require('gulp') //引入gulp
const htmlmin = require('gulp-htmlmin') //引入html壓縮模塊
const path = { //方便管理路徑
    html: {
        src: 'src/**/*.html',
        dest: 'dist'
    }
}
const html = () => { //創建任務，並命名任務名
    /*一個*表示所有文件，兩個*表示所有目錄*/
    return gulp.src(path.html.src) //打開讀取文件
        .pipe(htmlmin({
            removeComments: true, //清除HTML註釋
            collapseWhitespace: true, //壓縮HTML
            collapseBooleanAttributes: true, //省略布爾屬性的值 <input checked="true"/> ==> <input checked />
            removeEmptyAttributes: true, //刪除所有空格作屬性值 <input id="" /> ==> <input />
            removeScriptTypeAttributes: false, //刪除<script>的type="text/javascript"
            removeStyleLinkTypeAttributes: true, //刪除<style>和<link>的type="text/css"
            minifyJS: true, //壓縮頁面JS
            minifyCSS: true //壓縮頁面CSS
        })) //管道流操作，壓縮文件
        .pipe(gulp.dest(path.html.dest)) //指定壓縮文件放置的目錄
}

module.exports = { //一定要以對象形式導出
    html
}

三、css壓縮

安裝css壓縮模塊，輸入命令

yarn add gulp-clean-css -D

 

 

 然後也在gulpFile.js文件里寫壓縮css的命令

const gulp = require('gulp') //引入gulp
const htmlmin = require('gulp-htmlmin') //引入html壓縮模塊
const cleanCss = require('gulp-clean-css') //引入css壓縮模塊
const path = { //方便管理路徑
    /*一個*表示所有文件，兩個*表示所有目錄*/
    html: {
        src: 'src/**/*.html',
        dest: 'dist'
    },
    css: {
        src: 'src/**/*.css',
        dest: 'dist'
    }
}

gulp.task('css', () => {
    return gulp.src(path.css.src)
        .pipe(cleanCss())
        .pipe(gulp.dest(path.css.dest))
})

輸入命令 gulp css 命令執行

 

 

 另外css還有一個很好用的模塊，它可以自動給需要兼容的css屬性加前綴，輸入命令安裝它

yarn add gulp-autoprefixer -D

安裝好了，引入模塊，調用即可

四、js壓縮

安裝js es6語法轉es5語法模塊，壓縮js模塊，輸入命令

yarn add -D gulp-babel @babel/core @babel/preset-env //es6語法轉es5
yarn add -D gulp-uglify //壓縮js

 

 

 同樣的打開 gulpFile.js 文件寫壓縮js的命令

const gulp = require('gulp') //引入gulp
const htmlmin = require('gulp-htmlmin') //引入html壓縮模塊
const cleanCss = require('gulp-clean-css') //引入css壓縮模塊
const autoprefixer = require('gulp-autoprefixer') //引入加前綴模塊
const babel = require('gulp-babel'), //引入es6轉es5模塊
    uglify = require('gulp-uglify') //引入js壓縮模塊
const path = { //方便管理路徑
    /*一個*表示所有文件，兩個*表示所有目錄*/
    html: {
        src: 'src/**/*.html',
        dest: 'dist'
    },
    css: {
        src: 'src/**/*.css',
        dest: 'dist'
    },
    js: {
        src: 'src/**/*.js',
        dest: 'dist'
    }
}
gulp.task('js', () => {
    gulp.src(path.js.src)
        .pipe(babel({
            presets: ['@babel/env'] //es6轉es5
        }))
        .pipe(uglify()) //執行壓縮
        .pipe(gulp.dest(path.js.dest))
})

輸入命令 gulp js 運行

五、監聽任務

監聽任務需要使用gulp4的寫法

const gulp = require('gulp') //引入gulp
const htmlmin = require('gulp-htmlmin') //引入html壓縮模塊
const cleanCss = require('gulp-clean-css') //引入css壓縮模塊
const autoprefixer = require('gulp-autoprefixer') //引入加前綴模塊
const babel = require('gulp-babel'), //引入es6轉es5模塊
    uglify = require('gulp-uglify') //引入js壓縮模塊
const path = { //方便管理路徑
    /*一個*表示所有文件，兩個*表示所有目錄*/
    html: {
        src: 'src/**/*.html',
        dest: 'dist'
    },
    css: {
        src: 'src/**/*.css',
        dest: 'dist'
    },
    js: {
        src: 'src/**/*.js',
        dest: 'dist'
    }
}



const css = () => {
    return gulp.src(path.css.src)
        .pipe(autoprefixer())
        .pipe(cleanCss())
        .pipe(gulp.dest(path.css.dest))
}
const js = () => {
    return gulp.src(path.js.src)
        .pipe(babel({
            presets: ['@babel/env'] //es6轉es5
        }))
        .pipe(uglify()) //執行壓縮
        .pipe(gulp.dest(path.js.dest))
}

const html = () => { //創建任務，並命名任務名
    return gulp.src(path.html.src) //打開讀取文件
        .pipe(htmlmin({
            removeComments: true, //清除HTML註釋
            collapseWhitespace: true, //壓縮HTML
            collapseBooleanAttributes: true, //省略布爾屬性的值 <input checked="true"/> ==> <input checked />
            removeEmptyAttributes: true, //刪除所有空格作屬性值 <input id="" /> ==> <input />
            removeScriptTypeAttributes: false, //刪除<script>的type="text/javascript"
            removeStyleLinkTypeAttributes: true, //刪除<style>和<link>的type="text/css"
            minifyJS: true, //壓縮頁面JS
            minifyCSS: true //壓縮頁面CSS
        })) //管道流操作，壓縮文件
        .pipe(gulp.dest(path.html.dest)) //指定壓縮文件放置的目錄
}
const watch = () => { //監聽文件，文件改變執行對應的任務
    gulp.watch(path.html.src, html)
    gulp.watch(path.css.src, css)
    gulp.watch(path.js.src, js)
}

module.exports = {
    html,
    js,
    css,
    watch
}

輸入命令 gulp watch 即可實現監聽

六、gulp創建服務器

輸入命令

yarn add gulp-connect -D

引入模塊

const connect = require('gulp-connect')

創建服務器

const server = () => {
    connect.server({ //創建服務器
        root: 'dist',//根目錄
        port: '2000',//端口號
        livereload:true//服務器熱更新
    })
}

導出模塊

module.exports = {
    html,
    js,
    css,
    watch,
    server
}

輸入命令 gulp server 就可以運行了

如果想直接打開首頁，可以輸入命令安裝open模塊

yarn add open -S

然後再任何位置寫入你想打開的網址

open('http://127.0.0.1:2000')

還有一個模塊也可以創建服務器

輸入命令安裝

yarn add gulp-webServer -D

 

 引入模塊

const    webserver = require('gulp-webserver')

創建服務器

const createServer = () => {
    return gulp.src('./dist')
        .pipe(webserver({ //創建服務器
            port:'3000', //端口號
            open:'/html', //默認打開路徑
            livereload:true //熱更新
        }))
}

七、同時運行多個任務

// 默認任務：default 我們可以把所有任務都放進default
// series 同步執行，先執行刪除dist任務，再執行其他任務
// parallel 異步執行（并行），不會互相影響的任務可以并行
module.exports.default = gulp.series(gulp.parallel(html,js,css,watch,server))

運行只需要寫 gulp 命令

如果想頁面實時更新的話，再想實時更新的任務後面加上

.pipe(connect.reload())

然後重啟服務器就ok了

八、反向代理

輸入命令

yarn add http-proxy-middleware -D

 

 引入模塊

const proxy = require('http-proxy-middleware')

創建反向代理

connect 創建的服務器要用函數創建代理

const server = () => {
    connect.server({ //創建服務器
        root: 'dist', //根目錄
        port: '2000', //端口號
        livereload: true, //服務器熱更新
        middleware: () => {
            return [
                proxy.createProxyMiddleware('/api', { //創建反向代理，請求已 /api 開頭就使用target的服務器
                    target: 'http://localhost',//需要代理的服務器
                    changeOrigin: true
                })
            ]
        }

    })
}

 webserver創建的服務器要用數組創建代理

const createServer = () => {
    return gulp.src('./dist')
        .pipe(webserver({ //創建服務器
            port: '3000', //端口號
            open: '/html', //默認打開路徑
            livereload: true, //熱更新
            middleware: [
                proxy.createProxyMiddleware('/api', { //創建反向代理，請求已 /api 開頭就使用target的服務器
                    target: 'http://localhost',
                    changeOrigin: true
                })
            ]
        }))
}

 

本站聲明:網站內容來源於博客園,如有侵權,請聯繫我們,我們將及時處理

【其他文章推薦】

※別再煩惱如何寫文案,掌握八大原則!

※網頁設計一頭霧水該從何著手呢? 台北網頁設計公司幫您輕鬆架站!

※超省錢租車方案

※教你寫出一流的銷售文案?

※網頁設計最專業,超強功能平台可客製化

對於記錄的數據，如何用 Python 進行分析、或圖形化呢？

本文將介紹 numpy, matplotlib, pandas, scipy 幾個包，進行數據分析、與圖形化。

準備環境

Python 環境建議用 Anaconda 發行版，下載地址：

• 官方: https://www.anaconda.com/products/individual#Downloads
• 清華源: https://mirrors.tuna.tsinghua.edu.cn/anaconda/archive/

Anaconda 是一個用於科學計算的 Python 發行版，已經包含了眾多流行的科學計算、數據分析的 Python 包。

可以 conda list 列出已有的包，會發現本文要介紹的幾個包都有了：

$ conda list | grep numpy
numpy                     1.17.2           py37h99e6662_0

$ conda list | grep "matplot\|seaborn\|plotly"
matplotlib                3.1.1            py37h54f8f79_0
seaborn                   0.9.0                    py37_0

$ conda list | grep "pandas\|scipy"
pandas                    0.25.1           py37h0a44026_0
scipy                     1.3.1            py37h1410ff5_0

如果已有 Python 環境，那麼 pip 安裝一下它們：

pip install numpy matplotlib pandas scipy
# pypi 鏡像: https://mirrors.tuna.tsinghua.edu.cn/help/pypi/

本文環境為： Python 3.7.4 (Anaconda3-2019.10)

準備數據

本文假設了如下格式的數據 data0.txt :

id, data, timestamp
0, 55, 1592207702.688805
1, 41, 1592207702.783134
2, 57, 1592207702.883619
3, 59, 1592207702.980597
4, 58, 1592207703.08313
5, 41, 1592207703.183011
6, 52, 1592207703.281802
...

CSV 格式：逗號分隔，讀寫簡單， Excel 可打開。

之後，我們會一起達成如下幾個目標：

• CSV 數據， numpy 讀取與計算
• data 列數據， matplotlib 圖形化
• data 列數據， scipy 插值，形成曲線
• timestamp 列數據， pandas 分析前後差值、每秒個數

numpy 讀取數據

numpy 可用 loadtxt 直接讀取 CSV 數據，

import numpy as np

# id, (data), timestamp
datas = np.loadtxt(p, dtype=np.int32, delimiter=",", skiprows=1, usecols=(1))

• dtype=np.int32: 數據類型 np.int32
• delimiter=",": 分隔符 “,”
• skiprows=1: 跳過第 1 行
• usecols=(1): 讀取第 1 列

如果讀取多列，

# id, (data, timestamp)
dtype = {'names': ('data', 'timestamp'), 'formats': ('i4', 'f8')}
datas = np.loadtxt(path, dtype=dtype, delimiter=",", skiprows=1, usecols=(1, 2))

dtype 說明可見: https://numpy.org/devdocs/reference/arrays.dtypes.html

numpy 分析數據

numpy 計算均值、樣本標準差：

# average
data_avg = np.mean(datas)
# data_avg = np.average(datas)

# standard deviation
# data_std = np.std(datas)
# sample standard deviation
data_std = np.std(datas, ddof=1)

print("  avg: {:.2f}, std: {:.2f}, sum: {}".format(
      data_avg, data_std, np.sum(datas)))

matplotlib 圖形化

只需四行，就能圖形化显示了：

import sys

import matplotlib.pyplot as plt
import numpy as np

def _plot(path):
  print("Load: {}".format(path))
  # id, (data), timestamp
  datas = np.loadtxt(path, dtype=np.int32, delimiter=",", skiprows=1, usecols=(1))

  fig, ax = plt.subplots()
  ax.plot(range(len(datas)), datas, label=str(i))
  ax.legend()
  plt.show()

if __name__ == "__main__":
  if len(sys.argv) < 2:
    sys.exit("python data_plot.py *.txt")
  _plot(sys.argv[1])

ax.plot(x, y, ...) 橫坐標 x 取的數據下標 range(len(datas)) 。

完整代碼見文末 Gist 地址的 data_plot.py 。運行效果如下：

$ python data_plot.py data0.txt
Args
  nonzero: False
Load: data0.txt
  size: 20
  avg: 52.15, std: 8.57, sum: 1043

可以讀取多個文件，一起显示：

$ python data_plot.py data*.txt
Args
  nonzero: False
Load: data0.txt
  size: 20
  avg: 52.15, std: 8.57, sum: 1043
Load: data1.txt
  size: 20
  avg: 53.35, std: 6.78, sum: 1067

scipy 對數據插值

x, y 兩組數據，用 scipy 進行插值，平滑成曲線：

from scipy import interpolate

xnew = np.arange(xvalues[0], xvalues[-1], 0.01)
ynew = interpolate.interp1d(xvalues, yvalues, kind='cubic')

完整代碼見文末 Gist 地址的 data_interp.py 。運行效果如下：

python data_interp.py data0.txt

matplotlib 圖像化時如何配置、延遲、保存，可見代碼與註釋。

pandas 分析數據

這兒需要讀取 timestamp 列數據，

# id, data, (timestamp)
stamps = np.loadtxt(path, dtype=np.float64, delimiter=",", skiprows=1, usecols=(2))

numpy 計算前後差值，

stamps_diff = np.diff(stamps)

pandas 統計每秒個數，

stamps_int = np.array(stamps, dtype='int')
stamps_int = stamps_int - stamps_int[0]
import pandas as pd
stamps_s = pd.Series(data=stamps_int)
stamps_s = stamps_s.value_counts(sort=False)

辦法：把時間戳直接變整秒數，再 pandas 統計相同值。

完整代碼見文末 Gist 地址的 stamp_diff.py 。運行效果如下：

python stamp_diff.py data0.txt

matplotlib 圖形化時怎麼显示多個圖表，也可見代碼。

結語

本文代碼 Gist 地址: https://gist.github.com/ikuokuo/8629cc28079199c65e0eedb0d02a9e74

本站聲明:網站內容來源於博客園,如有侵權,請聯繫我們,我們將及時處理

【其他文章推薦】

※教你寫出一流的銷售文案?

※廣告預算用在刀口上，台北網頁設計公司幫您達到更多曝光效益

※回頭車貨運收費標準

※別再煩惱如何寫文案,掌握八大原則!

※超省錢租車方案

※產品缺大量曝光嗎?你需要的是一流包裝設計!