前往新版Gitcode，体验更适合开发者的 AI 搜索 >>
<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=2"><meta name="theme-color" content="#222"><meta name="generator" content="Hexo 4.2.0"><link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png"><link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png"><link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png"><link rel="mask-icon" href="/images/logo.svg" color="#222"><link rel="stylesheet" href="/css/main.css"><link rel="stylesheet" href="/lib/font-awesome/css/all.min.css"><script id="hexo-configurations">var NexT=window.NexT||{},CONFIG={hostname:"alderaan.xyz",root:"/",scheme:"Gemini",version:"7.8.0",exturl:!1,sidebar:{position:"left",display:"post",padding:18,offset:12,onmobile:!1},copycode:{enable:!1,show_result:!1,style:null},back2top:{enable:!0,sidebar:!1,scrollpercent:!1},bookmark:{enable:!1,color:"#222",save:"auto"},fancybox:!1,mediumzoom:!1,lazyload:!1,pangu:!1,comments:{style:"tabs",active:null,storage:!0,lazyload:!1,nav:null},algolia:{hits:{per_page:10},labels:{input_placeholder:"Search for Posts",hits_empty:"We didn't find any results for the search: ${query}",hits_stats:"${hits} results found in ${time} ms"}},localsearch:{enable:!1,trigger:"auto",top_n_per_article:1,unescape:!1,preload:!1},motion:{enable:!0,async:!1,transition:{post_block:"fadeIn",post_header:"slideDownIn",post_body:"slideDownIn",coll_header:"slideLeftIn",sidebar:"slideUpIn"}}}</script><meta name="description" content="概述 由于博客使用的插件较多，文章内包含的图片越多越大，会影响到博客的加载速度，影响访问效果。其中图片对文章加载速度影响较大，如果可以的话，可以使用国内的一些图床，但如果图床挂了，也会导致图片无法访问，迁移麻烦等，所以本博客还是挂在Github上进行访问。为此开始从资源文件大小上进行优化，了解到可以使用Gulp对博客的js、css、img、html等静态资源文件进行压缩。"><meta property="og:type" content="article"><meta property="og:title" content="使用Gulp压缩Hexo博客静态资源"><meta property="og:url" content="https://alderaan.xyz/2020/05/07/hexo-compress/index.html"><meta property="og:site_name" content="Alderaan的博客"><meta property="og:description" content="概述 由于博客使用的插件较多，文章内包含的图片越多越大，会影响到博客的加载速度，影响访问效果。其中图片对文章加载速度影响较大，如果可以的话，可以使用国内的一些图床，但如果图床挂了，也会导致图片无法访问，迁移麻烦等，所以本博客还是挂在Github上进行访问。为此开始从资源文件大小上进行优化，了解到可以使用Gulp对博客的js、css、img、html等静态资源文件进行压缩。"><meta property="og:locale" content="zh_CN"><meta property="article:published_time" content="2020-05-07T13:06:42.000Z"><meta property="article:modified_time" content="2020-05-11T06:20:15.584Z"><meta property="article:author" content="Alderaan"><meta property="article:tag" content="Hexo"><meta property="article:tag" content="Gulp"><meta name="twitter:card" content="summary"><link rel="canonical" href="https://alderaan.xyz/2020/05/07/hexo-compress/"><script id="page-configurations">CONFIG.page={sidebar:"",isHome:!1,isPost:!0,lang:"zh-CN"}</script><title>使用Gulp压缩Hexo博客静态资源 | Alderaan的博客</title><noscript><style>.sidebar-inner,.use-motion .brand,.use-motion .collection-header,.use-motion .comments,.use-motion .menu-item,.use-motion .pagination,.use-motion .post-block,.use-motion .post-body,.use-motion .post-header{opacity:initial}.use-motion .site-subtitle,.use-motion .site-title{opacity:initial;top:initial}.use-motion .logo-line-before i{left:initial}.use-motion .logo-line-after i{right:initial}</style></noscript><link rel="alternate" href="/atom.xml" title="Alderaan的博客" type="application/atom+xml"></head><body itemscope itemtype="http://schema.org/WebPage"><div class="container use-motion"><div class="headband"></div><header class="header" itemscope itemtype="http://schema.org/WPHeader"><div class="header-inner"><div class="site-brand-container"><div class="site-nav-toggle"><div class="toggle" aria-label="切换导航栏"><span class="toggle-line toggle-line-first"></span><span class="toggle-line toggle-line-middle"></span><span class="toggle-line toggle-line-last"></span></div></div><div class="site-meta"><a href="/" class="brand" rel="start"><span class="logo-line-before"><i></i></span><h1 class="site-title">Alderaan的博客</h1><span class="logo-line-after"><i></i></span></a></div><div class="site-nav-right"><div class="toggle popup-trigger"></div></div></div><nav class="site-nav"><ul id="menu" class="main-menu menu"><li class="menu-item menu-item-home"><a href="/" rel="section"><i class="fa fa-home fa-fw"></i> 首页</a></li><li class="menu-item menu-item-about"><a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i> 关于</a></li><li class="menu-item menu-item-tags"><a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i> 标签</a></li><li class="menu-item menu-item-categories"><a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i> 分类</a></li><li class="menu-item menu-item-archives"><a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i> 归档</a></li></ul></nav></div></header><div class="back-to-top"><i class="fa fa-arrow-up"></i> <span>0%</span></div><main class="main"><div class="main-inner"><div class="content-wrap"><div class="content post posts-expand"><article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN"><link itemprop="mainEntityOfPage" href="https://alderaan.xyz/2020/05/07/hexo-compress/"><span hidden itemprop="author" itemscope itemtype="http://schema.org/Person"><meta itemprop="image" content="/images/avatar.jpg"><meta itemprop="name" content="Alderaan"><meta itemprop="description" content=""></span><span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization"><meta itemprop="name" content="Alderaan的博客"></span><header class="post-header"><h1 class="post-title" itemprop="name headline"> 使用Gulp压缩Hexo博客静态资源</h1><div class="post-meta"><span class="post-meta-item"><span class="post-meta-item-icon"><i class="far fa-calendar"></i></span> <span class="post-meta-item-text">发表于</span> <time title="创建时间：2020-05-07 21:06:42" itemprop="dateCreated datePublished" datetime="2020-05-07T21:06:42+08:00">2020-05-07</time></span><span class="post-meta-item"><span class="post-meta-item-icon"><i class="far fa-calendar-check"></i></span> <span class="post-meta-item-text">更新于</span> <time title="修改时间：2020-05-11 14:20:15" itemprop="dateModified" datetime="2020-05-11T14:20:15+08:00">2020-05-11</time></span><span class="post-meta-item"><span class="post-meta-item-icon"><i class="far fa-folder"></i></span> <span class="post-meta-item-text">分类于</span> <span itemprop="about" itemscope itemtype="http://schema.org/Thing"><a href="/categories/Hexo/" itemprop="url" rel="index"><span itemprop="name">Hexo</span></a></span></span><span class="post-meta-item" title="阅读次数" id="busuanzi_container_page_pv" style="display:none"><span class="post-meta-item-icon"><i class="fa fa-eye"></i></span> <span class="post-meta-item-text">阅读次数：</span><span id="busuanzi_value_page_pv"></span></span></div></header><div class="post-body" itemprop="articleBody"><h2 id="概述"><a href="#概述" class="headerlink" title="概述"></a>概述</h2><p> 由于博客使用的插件较多，文章内包含的图片越多越大，会影响到博客的加载速度，影响访问效果。其中图片对文章加载速度影响较大，如果可以的话，可以使用国内的一些图床，但如果图床挂了，也会导致图片无法访问，迁移麻烦等，所以本博客还是挂在Github上进行访问。为此开始从资源文件大小上进行优化，了解到可以使用<strong>Gulp</strong>对博客的js、css、img、html等静态资源文件进行压缩。</p><a id="more"></a><h2 id="Gulp全局安装"><a href="#Gulp全局安装" class="headerlink" title="Gulp全局安装"></a>Gulp全局安装</h2><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ npm install gulp -g</span><br></pre></td></tr></table></figure><p> 本博客安装的<strong>Gulp</strong>版本为4.0.2。</p><h2 id="Gulp插件安装"><a href="#Gulp插件安装" class="headerlink" title="Gulp插件安装"></a>Gulp插件安装</h2><p> 在<code>blog</code>文件夹(站点根目录)下，安装必备的插件：</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ npm install gulp gulp-minify-css gulp-uglify gulp-htmlmin gulp-htmlclean gulp-imagemin --save</span><br></pre></td></tr></table></figure><p> 安装完成后，可以在<code>package.json</code>下查看到具体的插件版本信息，本博客的插件版本对应信息如下：</p><figure class="highlight"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">"dependencies": {</span><br><span class="line"> "gulp": "^4.0.2",</span><br><span class="line"> "gulp-htmlclean": "^2.7.22",</span><br><span class="line"> "gulp-htmlmin": "^5.0.1",</span><br><span class="line"> "gulp-imagemin": "^7.1.0",</span><br><span class="line"> "gulp-minify-css": "^1.2.4",</span><br><span class="line"> "gulp-uglify": "^3.0.2"</span><br><span class="line">}</span><br></pre></td></tr></table></figure><h2 id="创建gulpfile-js文件"><a href="#创建gulpfile-js文件" class="headerlink" title="创建gulpfile.js文件"></a>创建gulpfile.js文件</h2><p> 在<code>blog</code>文件夹(站点根目录)下，新建<code>gulpfile.js</code>文件，并编写如下内容：</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 引入需要的模块</span></span><br><span class="line"><span class="keyword">var</span> gulp = <span class="built_in">require</span>(<span class="string">'gulp'</span>);</span><br><span class="line"><span class="keyword">var</span> minifycss = <span class="built_in">require</span>(<span class="string">'gulp-minify-css'</span>);</span><br><span class="line"><span class="keyword">var</span> uglify = <span class="built_in">require</span>(<span class="string">'gulp-uglify'</span>);</span><br><span class="line"><span class="keyword">var</span> htmlmin = <span class="built_in">require</span>(<span class="string">'gulp-htmlmin'</span>);</span><br><span class="line"><span class="keyword">var</span> htmlclean = <span class="built_in">require</span>(<span class="string">'gulp-htmlclean'</span>);</span><br><span class="line"><span class="keyword">var</span> imagemin = <span class="built_in">require</span>(<span class="string">'gulp-imagemin'</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 压缩public目录下所有html文件, minify-html是任务名, 设置为default，启动gulp压缩的时候可以省去任务名</span></span><br><span class="line">gulp.task(<span class="string">'minify-html'</span>, <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</span><br><span class="line"> <span class="keyword">return</span> gulp.src(<span class="string">'./public/**/*.html'</span>) <span class="comment">// 压缩文件所在的目录</span></span><br><span class="line"> .pipe(htmlclean())</span><br><span class="line"> .pipe(htmlmin({</span><br><span class="line"> removeComments: <span class="literal">true</span>,</span><br><span class="line"> minifyJS: <span class="literal">true</span>,</span><br><span class="line"> minifyCSS: <span class="literal">true</span>,</span><br><span class="line"> minifyURLs: <span class="literal">true</span>,</span><br><span class="line"> }))</span><br><span class="line"> .pipe(gulp.dest(<span class="string">'./public'</span>)) <span class="comment">// 输出的目录</span></span><br><span class="line">});</span><br><span class="line"></span><br><span class="line"><span class="comment">// 压缩css</span></span><br><span class="line">gulp.task(<span class="string">'minify-css'</span>, <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</span><br><span class="line"> <span class="keyword">return</span> gulp.src([<span class="string">'./public/**/*.css'</span>,<span class="string">'!./public/js/**/*min.css'</span>])</span><br><span class="line"> .pipe(minifycss({</span><br><span class="line"> compatibility: <span class="string">'ie8'</span></span><br><span class="line"> }))</span><br><span class="line"> .pipe(gulp.dest(<span class="string">'./public'</span>));</span><br><span class="line">});</span><br><span class="line"><span class="comment">// 压缩js</span></span><br><span class="line">gulp.task(<span class="string">'minify-js'</span>, <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</span><br><span class="line"> <span class="keyword">return</span> gulp.src([<span class="string">'./public/**/.js'</span>,<span class="string">'!./public/js/**/*min.js'</span>])</span><br><span class="line"> .pipe(uglify())</span><br><span class="line"> .pipe(gulp.dest(<span class="string">'./public'</span>));</span><br><span class="line">});</span><br><span class="line"><span class="comment">// 压缩图片</span></span><br><span class="line">gulp.task(<span class="string">'minify-images'</span>, <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</span><br><span class="line"> <span class="keyword">return</span> gulp.src([<span class="string">'./public/**/*.png'</span>,<span class="string">'./public/**/*.jpg'</span>,<span class="string">'./public/**/*.gif'</span>])</span><br><span class="line"> .pipe(imagemin(</span><br><span class="line"> [imagemin.gifsicle({<span class="string">'optimizationLevel'</span>: <span class="number">3</span>}), </span><br><span class="line"> imagemin.mozjpeg({<span class="string">'progressive'</span>: <span class="literal">true</span>}), </span><br><span class="line"> imagemin.optipng({<span class="string">'optimizationLevel'</span>: <span class="number">5</span>}), </span><br><span class="line"> imagemin.svgo()],</span><br><span class="line"> {<span class="string">'verbose'</span>: <span class="literal">true</span>}))</span><br><span class="line"> .pipe(gulp.dest(<span class="string">'./public'</span>))</span><br><span class="line">});</span><br><span class="line"><span class="comment">// gulp 4.0 适用的方式</span></span><br><span class="line">gulp.task(<span class="string">'default'</span>, gulp.parallel(<span class="string">'minify-html'</span>,<span class="string">'minify-css'</span>,<span class="string">'minify-js'</span>,<span class="string">'minify-images'</span></span><br><span class="line">));</span><br></pre></td></tr></table></figure><p> 这里要注意，压缩过程中排除<code>*min.css</code>和<code>*min.js</code>这两类文件，因为这些文件其他人已经经过处理，不需要再进行压缩，否则可能无法正常使用。其他人网上的脚本使用的是<code>imagemin.jpegtran</code>，由于<code>gulp-imagemin</code>在7.0.0开始，已经被替换为 <code>mozjpeg</code>,具体可以在<a href="https://github.com/sindresorhus/gulp-imagemin/releases" target="_blank" rel="noopener">release</a>版本说明中查看。</p><h2 id="压缩指令"><a href="#压缩指令" class="headerlink" title="压缩指令"></a>压缩指令</h2><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">$ hexo clean // 可以先清除缓存文件和已生成的静态文件（特别是更换主题后需要执行此操作）</span><br><span class="line">$ hexo generate // 生成博客</span><br><span class="line">$ gulp default // 执行压缩，可简写为 gulp</span><br><span class="line">$ hexo deploy // 压缩完成无错误后，就可以发布了</span><br></pre></td></tr></table></figure><p> 在执行压缩过程中，可能会遇到压缩jpg、压缩png、压缩gif时的错误，或者提示类似于<code>imagemin-*</code>组件无法找到的错误。此时应该注意，<code>gulp-imagemin</code>也有对应的相关依赖，如本博客中版本为<code>7.1.0</code>，有以下特定版本的<a href="https://github.com/sindresorhus/gulp-imagemin/commit/67cceb3cfcef05a9523f0a89c71d56e42e2c3981" target="_blank" rel="noopener">依赖</a>：</p><figure class="highlight"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">"optionalDependencies": {</span><br><span class="line"> "imagemin-gifsicle": "^7.0.0",</span><br><span class="line"> "imagemin-mozjpeg": "^8.0.0",</span><br><span class="line"> "imagemin-optipng": "^7.0.0",</span><br><span class="line"> "imagemin-svgo": "^7.0.0"</span><br><span class="line">}</span><br></pre></td></tr></table></figure><p> 若对应依赖组件的版本有问题，可能会导致压缩对应格式的图片出错，为此建议当出现某个组件压缩失败时，手动安装对应特定的版本，<code>npm</code>安装软件包特定版本的命令格式如下：</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ npm install imagemin-mozjpeg@8.0.0 // 在软件包后面加上@版本号</span><br></pre></td></tr></table></figure><h2 id="效果"><a href="#效果" class="headerlink" title="效果"></a>效果</h2><p> 一次压缩过程输出内容如下：</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><span class="line">$ gulp</span><br><span class="line">[21:55:01] Using gulpfile ~/Documents/blog/gulpfile.js</span><br><span class="line">[21:55:01] Starting <span class="string">'default'</span>...</span><br><span class="line">[21:55:01] Starting <span class="string">'minify-html'</span>...</span><br><span class="line">[21:55:01] Starting <span class="string">'minify-css'</span>...</span><br><span class="line">[21:55:01] Starting <span class="string">'minify-js'</span>...</span><br><span class="line">[21:55:01] Starting <span class="string">'minify-images'</span>...</span><br><span class="line">[21:55:02] Finished <span class="string">'minify-js'</span> after 1.01 s</span><br><span class="line">[21:55:03] Finished <span class="string">'minify-css'</span> after 1.75 s</span><br><span class="line">[21:55:03] gulp-imagemin: ✔ images/apple-touch-icon-next.png (saved 190 B - 12.3%)</span><br><span class="line">[21:55:03] gulp-imagemin: ✔ images/favicon-16x16-next.png (saved 150 B - 34.5%)</span><br><span class="line">[21:55:03] gulp-imagemin: ✔ images/avatar.jpg (saved 3.69 kB - 18.6%)</span><br><span class="line">[21:55:03] gulp-imagemin: ✔ images/favicon-32x32-next.png (saved 152 B - 23.8%)</span><br><span class="line">[21:55:04] gulp-imagemin: ✔ 2020/05/03/hexo-install-and-deploy/20200503-114433.jpg (saved 51.1 kB - 54.5%)</span><br><span class="line">[21:55:04] gulp-imagemin: ✔ 2020/05/03/hexo-install-and-deploy/20200503-202546.jpg (saved 21.3 kB - 47.3%)</span><br><span class="line">[21:55:04] gulp-imagemin: ✔ 2020/05/03/hexo-install-and-deploy/20200503-200236.jpg (saved 40.2 kB - 51%)</span><br><span class="line">[21:55:04] gulp-imagemin: ✔ 2020/05/03/hexo-install-and-deploy/20200503-193801.jpg (saved 51 kB - 53%)</span><br><span class="line">[21:55:04] gulp-imagemin: ✔ 2020/05/03/hexo-install-and-deploy/20200503-111152.jpg (saved 80.1 kB - 56.7%)</span><br><span class="line">[21:55:04] gulp-imagemin: ✔ images/avatar.gif (saved 8 B - 0.4%)</span><br><span class="line">[21:55:04] gulp-imagemin: ✔ 2020/05/03/hexo-install-and-deploy/20200503-203256.jpg (saved 17.2 kB - 43.5%)</span><br><span class="line">[21:55:04] gulp-imagemin: ✔ 2020/05/03/hexo-install-and-deploy/20200503-205440.jpg (saved 18.5 kB - 47.4%)</span><br><span class="line">[21:55:04] gulp-imagemin: ✔ 2020/05/03/hexo-install-and-deploy/20200503-200812.jpg (saved 49.4 kB - 52.7%)</span><br><span class="line">[21:55:04] gulp-imagemin: ✔ 2020/05/03/hexo-install-and-deploy/20200503-202952.jpg (saved 49.6 kB - 52.5%)</span><br><span class="line">[21:55:04] gulp-imagemin: Minified 14 images (saved 383 kB - 51.3%)</span><br><span class="line">[21:55:04] Finished <span class="string">'minify-html'</span> after 3.13 s</span><br><span class="line">[21:55:04] Finished <span class="string">'minify-images'</span> after 3.13 s</span><br><span class="line">[21:55:04] Finished <span class="string">'default'</span> after 3.14 s</span><br></pre></td></tr></table></figure><p> <code>index.html</code>在压缩前的大小为<code>37,326</code>字节，压缩后为<code>33,537</code>字节；utils.js在压缩前的大小为15,982字节，压缩后仍为 <code>15,982</code>字节；main.css在压缩前大小为49,538字节，压缩后为<code>38,183</code>字节。</p><p> 由本次压缩可看出，Gulp对图片的压缩效果比较明显，在html、css、js上也有一定的效果，总体上讲还是有比较好的优化。</p></div><div><ul class="post-copyright"><li class="post-copyright-author"> <strong>本文作者：</strong> Alderaan</li><li class="post-copyright-link"> <strong>本文链接：</strong> <a href="https://alderaan.xyz/2020/05/07/hexo-compress/" title="使用Gulp压缩Hexo博客静态资源">https://alderaan.xyz/2020/05/07/hexo-compress/</a></li><li class="post-copyright-license"> <strong>版权声明：</strong> 本博客所有文章除特别声明外，均采用<a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" rel="noopener" target="_blank"><i class="fab fa-fw fa-creative-commons"></i> BY-NC-SA</a> 许可协议。转载请注明出处！</li></ul></div><footer class="post-footer"><div class="post-tags"><a href="/tags/Hexo/" rel="tag"><i class="fa fa-tag"></i> Hexo</a><a href="/tags/Gulp/" rel="tag"><i class="fa fa-tag"></i> Gulp</a></div><div class="post-nav"><div class="post-nav-item"><a href="/2020/05/07/ssh-to-git-github-com-connection-reset/" rel="prev" title="ssh -T git@github.com Connection reset by XXX port 22"><i class="fa fa-chevron-left"></i> ssh -T git@github.com Connection reset by XXX port 22</a></div><div class="post-nav-item"> <a href="/2020/05/10/mw150us-2-0-mac-driver/" rel="next" title="水星USB无线网卡mw150us苹果macOS系统驱动成功">水星USB无线网卡mw150us苹果macOS系统驱动成功<i class="fa fa-chevron-right"></i></a></div></div></footer></article></div><script> window.addEventListener('tabs:register', () => { let { activeClass } = CONFIG.comments; if (CONFIG.comments.storage) { activeClass = localStorage.getItem('comments_active') || activeClass; } if (activeClass) { let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`); if (activeTab) { activeTab.click(); } } }); if (CONFIG.comments.storage) { window.addEventListener('tabs:click', event => { if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return; let commentClass = event.target.classList[1]; localStorage.setItem('comments_active', commentClass); }); } </script></div><div class="toggle sidebar-toggle"><span class="toggle-line toggle-line-first"></span><span class="toggle-line toggle-line-middle"></span><span class="toggle-line toggle-line-last"></span></div><aside class="sidebar"><div class="sidebar-inner"><ul class="sidebar-nav motion-element"><li class="sidebar-nav-toc"> 文章目录</li><li class="sidebar-nav-overview"> 站点概览</li></ul><div class="post-toc-wrap sidebar-panel"><div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-2"><a class="nav-link" href="#概述"><span class="nav-number">1.</span> <span class="nav-text">概述</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#Gulp全局安装"><span class="nav-number">2.</span> <span class="nav-text">Gulp全局安装</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#Gulp插件安装"><span class="nav-number">3.</span> <span class="nav-text">Gulp插件安装</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#创建gulpfile-js文件"><span class="nav-number">4.</span> <span class="nav-text">创建gulpfile.js文件</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#压缩指令"><span class="nav-number">5.</span> <span class="nav-text">压缩指令</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#效果"><span class="nav-number">6.</span> <span class="nav-text">效果</span></a></li></ol></div></div><div class="site-overview-wrap sidebar-panel"><div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person"> <img class="site-author-image" itemprop="image" alt="Alderaan" src="/images/avatar.jpg"><p class="site-author-name" itemprop="name">Alderaan</p><div class="site-description" itemprop="description"></div></div><div class="site-state-wrap motion-element"><nav class="site-state"><div class="site-state-item site-state-posts"> <a href="/archives/"><span class="site-state-item-count">6</span> <span class="site-state-item-name">日志</span></a></div><div class="site-state-item site-state-categories"> <a href="/categories/"><span class="site-state-item-count">4</span> <span class="site-state-item-name">分类</span></a></div><div class="site-state-item site-state-tags"> <a href="/tags/"><span class="site-state-item-count">10</span> <span class="site-state-item-name">标签</span></a></div></nav></div></div></div></aside><div id="sidebar-dimmer"></div></div></main><footer class="footer"><div class="footer-inner"><div class="copyright"> © <span itemprop="copyrightYear">2020</span><span class="with-love"><i class="fa fa-heart"></i></span> <span class="author" itemprop="copyrightHolder">Alderaan</span></div><div class="busuanzi-count"><script async src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script><span class="post-meta-item" id="busuanzi_container_site_uv" style="display:none"><span class="post-meta-item-icon"><i class="fa fa-user"></i></span><span class="site-uv" title="总访客量"><span id="busuanzi_value_site_uv"></span></span></span> <span class="post-meta-divider">|</span><span class="post-meta-item" id="busuanzi_container_site_pv" style="display:none"><span class="post-meta-item-icon"><i class="fa fa-eye"></i></span><span class="site-pv" title="总访问量"><span id="busuanzi_value_site_pv"></span></span></span></div></div></footer></div><script src="/lib/anime.min.js"></script><script src="/lib/velocity/velocity.min.js"></script><script src="/lib/velocity/velocity.ui.min.js"></script><script src="/js/utils.js"></script><script src="/js/motion.js"></script><script src="/js/schemes/pisces.js"></script><script src="/js/next-boot.js"></script></body></html>
