Gulp初学体会，从零安装并使用Gulp压缩css、js、html、图片

约定不等于承诺〃 2022-11-19 09:57 221阅读 0赞

### 初识Gulp ###

作为一个PHP程序员，在小的外包公司中经常要做一些小型的内容管理系统。而在这个时候非常迫切的想要一套集成好的H5后台管理系统模板。原本一直在基于[Layui][]使用自己写好的后台模板，但是始终对[layuiAdmin 后台管理模板][layuiAdmin]充满憧憬（贫穷让我没法enjoy it）。终于在无数次的Internet冲浪中我找到了源码（V1.4--需要的小伙伴密我QQ邮箱：321824916@qq.com），而这套系统是前后端分离的,对于前端小白，经常使用TP框架的我“尺寸有点不合适”。

学习源码的过程中，认识到了Gulp（然并卵）我跟不不知道这个东西是干什么用的。遇事不决找度娘。[Gulp官网][Gulp]说：“用自动化构建工具增强你的工作流程！”-------------什么鬼。然后就只能去Internet冲浪，最终个人理解的就是对开发环境下的前端文件，进行优化进而得到生产环境下的前端代码。而这其中的精髓便是优化方式，而小白的我只是学习到了对前端文件的压缩，下面记录一下整个安装，学习，尝试的过程。

### 安装Gulp ###

由于Gulp本身是node.js的一个模块，所以首先要安装node，考虑到版本切换比较方便的问题所以采用了nvm安装node的方式，下面记录一下安装过程：

1.在GitHub上下载nvm的安装包（[nvm--window--下载][nvm--window--]）；

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BhbmdqdW53ZWk_size_16_color_FFFFFF_t_70][]

2.解压下载的文件进行安装，

![57bce913da94945698095d9fd38c9d28.png][]

3.选择nvm和node的安装路径

![650f24f0539011b472896a4004770d62.png][]

![f97ab0ae90a8119feb1882818716d976.png][]

4.剩下的过程默认选项安装即可，然后打开命令行（cmd）输入nvm -v,显示下面的效果则为安装成功；如果提示nvm命令不识别，重启一下即可。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BhbmdqdW53ZWk_size_16_color_FFFFFF_t_70 1][]

5.使用nvm安装node.js，输入命令：nvm list 可以查看当前电脑已经安装的node.js版本；输入命令：nvm list available 可以查看所有可以下载的版本但是不全，具体完整的可以访问网址：[https://nodejs.org/download/release][https_nodejs.org_download_release] 查看

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BhbmdqdW53ZWk_size_16_color_FFFFFF_t_70 2][]

6.输入命令 nvm install + 版本号  进行对应版本的nodejs进行安装，在nvm安装目录下找到settings.txt文件打开后加上以下内容使用淘宝镜像加快下载速度：

node_mirror: https://npm.taobao.org/mirrors/node/ 
    npm_mirror: https://npm.taobao.org/mirrors/npm/

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BhbmdqdW53ZWk_size_16_color_FFFFFF_t_70 3][]

7.输入命令： nvm use + 版本号 ，使用特定版本的node.js

![20210121091119489.png][]

8.输入命令： nvm uninstall + 版本号 ，卸载特定版本的nodejs

![20210121091319502.png][]

\*\*\*\*一些常用nvm命令\*\*\*\*

：nvm arch ：显示node是运行在32位还是64位。

：nvm install <version> \[arch\] ：安装node， version是特定版本也可以是最新稳定版本latest。可选参数arch指定安装32位还是64位版本，默认是系统位数。可以添加--insecure绕过远程服务器的SSL。

：nvm list \[available\] ：显示已安装的列表。可选参数available，显示可安装的所有版本。list可简化为ls。

：nvm on ：开启node.js版本管理。

：nvm off ：关闭node.js版本管理。

：nvm proxy \[url\] ：设置下载代理。不加可选参数url，显示当前代理。将url设置为none则移除代理。

：nvm node\_mirror \[url\] ：设置node镜像。默认是https://nodejs.org/dist/。如果不写url，则使用默认url。设置后可至安装目录settings.txt文件查看，也可直接在该文件操作。

：nvm npm\_mirror \[url\] ：设置npm镜像。https://github.com/npm/cli/archive/。如果不写url，则使用默认url。设置后可至安装目录settings.txt文件查看，也可直接在该文件操作。

：nvm uninstall <version> ：卸载指定版本node。

：nvm use \[version\] \[arch\] ：使用制定版本node。可指定32/64位。

：nvm root \[path\] ：设置存储不同版本node的目录。如果未设置，默认使用当前目录。

：nvm version ：显示nvm版本。version可简化为v。

9.Gulp安装

输入命令： npm install gulp -g 进行安装，然后输入gulp -v 进行安装结果测试，成功安装截图如下。

![2021012110294212.png][]

### Gulp前端代码优化，压缩css、js、html、图片 ###

1.新建测试文件夹gulp，输入命令： npm init ，直接回车默认选项即可，然后本地安装gulp,输入命令：npm install --save-dev gulp

![20210121111207905.png][]

2.导入前端源码文件夹src,创建一个名为 gulpfile.js 的文件

![202101211113360.png][]

3.gulp的工作原理其实用是运用各种插件，压缩html需要使用gulp-htmlmin插件

\*\*输入命令：npm install --save-dev gulp-htmlmin 安装插件，在gulpfile.js文件中编写如下代码，命令行执行：gulp html

//声明依赖
    var gulp = require('gulp');
    var htmlmin = require('gulp-htmlmin');
    
    
    //压缩html
    gulp.task('html', function() {
        var minifyOptions = {
            collapseWhitespace: true, // 折叠html节点间的空白
            minifyCSS: true, // 压缩css
            minifyJS: true, // 压缩js
            removeComments: true, // 去除注释
            removeEmptyAttributes: true, // 去除空属性
            removeRedundantAttributes: true // 去除与默认属性一致的属性值
        };
        return gulp.src('src/*.html')
            .pipe(htmlmin(minifyOptions))
            .pipe(gulp.dest('dist'));
    });

![20210121112530595.png][]

4.压缩css,使用插件 gulp-clean-css , 输入命令： npm install gulp-clean-css --save-dev 安装

//声明依赖
    var gulp = require('gulp');
    var cleancss = require('gulp-clean-css');
    
    //压缩css
    gulp.task('css', function() {
        return gulp.src('src/css/*.css')
            .pipe(cleancss({compatibility: 'ie8'}))
            .pipe(gulp.dest('dist/css'));
    });

![20210121113418389.png][]

5.压缩js,使用插件 gulp-uglify 输入命令：npm install --save-dev gulp-uglify 进行安装

//声明依赖
    var gulp = require('gulp');
    var uglify = require('gulp-uglify');
    var pump = require('pump');
    
    //压缩js
    gulp.task('js', function (cb) {
        pump([
            gulp.src('src/js/*.js'),
            uglify(),
            gulp.dest('dist/js')
        ], cb);
    });

![202101211133349.png][]

6.压缩图片，使用插件 gulp-imagemin 输入命令：npm install --save-dev gulp-imagemin 安装；如果npm安装失败可以先装cnpm,然后再装该插件即可

//声明依赖
    var gulp = require('gulp');
    var imagemin = require('gulp-imagemin');
    
    //压缩图片
    gulp.task('image', () =>
        gulp.src('src/images/*')
            .pipe(imagemin()).pipe(gulp.dest('dist/images'))
    );

\*\*由于只是做一个初步了解，并没有学的很清楚，后面再实际工作中着重应用一下

[Layui]: https://www.layui.com/
[layuiAdmin]: https://www.layui.com/admin/
[Gulp]: https://www.gulpjs.com.cn/
[nvm--window--]: https://github.com/coreybutler/nvm-windows/releases
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BhbmdqdW53ZWk_size_16_color_FFFFFF_t_70]: /images/20221119/59a3209f44ab49c48ec26c11c9f0d4a7.png
[57bce913da94945698095d9fd38c9d28.png]: /images/20221119/46f25e4f4db840519c4d8f9ad83de3a1.png
[650f24f0539011b472896a4004770d62.png]: /images/20221119/d8df391cee384ef4a607cf563f0b03ce.png
[f97ab0ae90a8119feb1882818716d976.png]: /images/20221119/41b4b7e487c94dbc9b0e0623434b97a6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BhbmdqdW53ZWk_size_16_color_FFFFFF_t_70 1]: /images/20221119/a579246af5b94648914b740fc25f59b7.png
[https_nodejs.org_download_release]: https://nodejs.org/download/release
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BhbmdqdW53ZWk_size_16_color_FFFFFF_t_70 2]: /images/20221119/cfd30ed7200f482ea59c1cea2af197b8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BhbmdqdW53ZWk_size_16_color_FFFFFF_t_70 3]: /images/20221119/0e12fe3a73de4e7081a48db671bd1027.png
[20210121091119489.png]: /images/20221119/3c4672df27844d74af51e58db6831bbe.png
[20210121091319502.png]: /images/20221119/aa51e0cfe455403f9304991b13d85769.png
[2021012110294212.png]: /images/20221119/425db385191b43b9bccbd5bceccb891d.png
[20210121111207905.png]: /images/20221119/9f57b4499c7a4fd5bbbffd1174fff57c.png
[202101211113360.png]: /images/20221119/1c8b78ce35814db6927f4d26c5cf80f9.png
[20210121112530595.png]: /images/20221119/9b9f8b62662e4de39e2fdd6064e909e0.png
[20210121113418389.png]: /images/20221119/920ccd8836b5414f895797f00086cc58.png
[202101211133349.png]: /images/20221119/eb68d02535cf44b791b3dae6f5b858a2.png