gulp壓縮靜態資源

JellyBool 發布于2019-08-22 11:08 / 2719人閱讀

摘要：需求分析我有等的壓縮需求，能滿足是構建自動化的工具，對業務的處理依托第三方插件來完成官方導讀前提運行環境安裝時并配置了是的包管理工具，就能下載相應模塊類似于的框架的也是下載依賴的好手步驟下載配置調用執行實踐的是中已下載的模塊直接使用模塊名

[需求分析]

我有JS/Css/html等的壓縮需求，gulp能滿足

gulp是構建自動化的工具，對業務的處理,依托第三方插件來完成

官方導讀 http://www.gulpjs.com.cn/docs...

[前提]

node.js運行環境安裝時并配置了npm

npm是node.js的包管理工具，npm install 就能下載相應模塊

類似于php的laravel框架的composer require,也是下載依賴的好手

[步驟]

gulp下載

gulpfile.js配置

gulp 調用執行

[實踐]

var gulp =  require("gulp"),            //require的是node_modules中已下載的模塊,直接使用模塊名
    cssmin = require("gulp-cssmin"),    //譬如你要處理css壓縮，那么你得確保已經npm install gulp-cssmin.這樣才能require
    jsmin = require("gulp-uglify");

/*gulp分配任務給指定的插件，由該插件輸入輸出式處理*/
//Css壓縮
gulp.task("cssmin",function () {        //cssmin是gulp調用執行時的任務名,隨意
    /*白話文:把什么樣的文件，輸出給哪個插件處理，結果再輸出到哪里*/
    gulp.src("./public/mobile/css/*.css")
        .pipe(cssmin())
        .pipe(gulp.dest("./release/css"));
});

//JS壓縮
gulp.task("jsmin",function () {
    gulp.src("./public/mobile/js/*.js")
        .pipe(jsmin())
        .pipe(gulp.dest("./release/js"));
});

[調用]

[gulp常用插件整理]

gulp-less         編譯LESS文件
gulp-autoprefixer 添加CSS私有前綴
gulp-cssmin       壓縮CSS
gulp-rname        重命名
gulp-imagemin     圖片壓縮
gulp-uglify       壓縮JS
gulp-concat       合并
gulp-htmlmin      壓縮HTML

插件寶庫在此
https://gulpjs.com/plugins/

GPU云服務器云服務器靜態資源靜態資源引用靜態資源存儲 cdn靜態資源

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/91839.html

gulp常用功能集合（開發和生產分離、靜態資源壓縮優化、代碼優化、實時預覽、hash）

摘要：在資源很多時，例如圖片的復制，這個會加快任務的執行速度，特別是需要實時預覽時，減少延遲。但是作為個入門短時間內還是不能夠被取代得了的。 gulp常用功能集合（開發和生產分離、靜態資源壓縮優化、代碼優化、實時預覽、hash） tags: gulp 前端自動化開發 npm倉庫下載地址https://www.npmjs.com/package/cddgulp [TOC]本人自用在此基礎上的...

silvertheo 2019-08-20 14:39 評論0 收藏0
前端架構gulp與webpack（知識點整理）

摘要：是通過加載器和插件對資源進行處理的。另外我們知道是對整個過程進行控制，所以在其配置文件中配置的每一個對項目中該配置路徑下所有的資源都可以管理。一概念介紹 gulp 是 task runner，Webpack 是 module bundler。可以這么說， Webpack 和 gulp 本身都有 95% 的功能是不能被對方替代，或者直接說和對方不重疊的。 1 什么是gulp Gulp...

willin 2019-08-21 18:34 評論0 收藏0
基于 Gulp 的簡易前端自動化工程搭建

摘要：生成的文件如下由于給文件添加了哈希值，所以每次編譯出來的和都是不一樣的，這會導致有很多冗余文件，所以我們可以每次在生成文件之前，先將原來的文件全部清空。中也有做這個工作的插件，因此我們可以在編譯壓縮添加哈希值之前先將原文將清空。原文鏈接：http://mrzhang123.github.io/2016/09/07/gulpUse/項目鏈接：https://github.com/MrZ...

Blackjun 2019-08-22 10:36 評論0 收藏0
前端模塊化和構建工具

摘要：以前一直對前端構建工具的理解不深，經過幾天的研究特意來總結一下，第一次寫博客，有寫錯的請多多見諒，該文章我也從其他博客拷了一些內容，如果有冒犯之處，請指出。強大的設計使得它更像是一個構建平臺，而不只是一個打包工具。以前一直對前端構建工具的理解不深，經過幾天的研究特意來總結一下，第一次寫博客，有寫錯的請多多見諒，該文章我也從其他博客拷了一些內容，如果有冒犯之處，請指出。如今，網頁不再...

ad6623 2019-08-20 18:37 評論0 收藏0