午夜91福利视频,午夜成人在线观看,午夜在线视频免费观看,午夜福利短视频,精品午夜成人免费视频APP

小程序模板網

小程序瘦身之利用gulp壓縮wxss

發布時間:2020-05-15 10:34 所屬欄目:小程序開發教程
 前言
眾所周知,微信小程序在發布的時候,對提交的代碼是有大小的限制!項目內容太多的時候我們就需要想辦法去做一些優化。
首先先打開自己項目的文件夾,看看體積最大的是什么,然后在針對它去做一些措施,由于我現在的項目體積最大的基本都是wxss,所以現在主要談談如何利用glup來壓縮wxss
(使用的是微信原生,瞎捉摸的,僅適用于小白,有更好的辦法歡迎評論里討論)
 
華麗的分隔線,前面的碎碎念可以略過,下面才是正文。
 
正文
安裝gulp
1、全局安裝
cnpm install gulp -g
2、檢查版本
gulp -v
 
在微信小程序中使用
先把微信所有項目都塞到一個文件夾

 
使用cmd打開根目錄,npm init 創建package.json

 
在更目錄下安裝gulp-clean-css,壓縮CSS文件
cnpm install gulp-clean-css -D
 
目錄下新建 gulpfile.js 文件,最后文件夾有這些東西

gulpfile.js 文件內容
 
var gulp = require('gulp'); // 載入Gulp模塊
var cleanCss = require('gulp-clean-css');  //加載clean模塊  壓縮css
//定義一個壓縮css代碼的任務,定義一個cleanCss任務,自定義任務名
gulp.task('cleanCss', (cb) => {
    console.log('執行壓縮!');
    gulp.src('./src/pages/index/*.wxss')  //找到原始文件
        .pipe(cleanCss())    //壓縮css代碼
        .pipe(gulp.dest('./src/pages/index/min_after'));  //壓縮后的代碼儲存在這里
    cb();
});
執行命令

結果



易(yi)優小程序(xu)(企業版)+靈活(huo)api+前后(hou)代(dai)碼開源 碼云倉庫:
本文地址://www.jinyoudianli.com/wxmini/doc/course/25191.html 復制鏈接 如需(xu)定制請(qing)聯系易優(you)客服咨詢:

工作日 8:30-12:00 14:30-18:00
周六及部(bu)分節假日(ri)提(ti)供值班服務

易小優
轉人(ren)工 ×