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

初识Gulp

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

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

安装Gulp

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

1.在GitHub上下载nvm的安装包(nvm--window--下载);

Gulp初学体会,从零安装并使用Gulp压缩css、js、html、图片_第1张图片

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

Gulp初学体会,从零安装并使用Gulp压缩css、js、html、图片_第2张图片

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

Gulp初学体会,从零安装并使用Gulp压缩css、js、html、图片_第3张图片

Gulp初学体会,从零安装并使用Gulp压缩css、js、html、图片_第4张图片

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

Gulp初学体会,从零安装并使用Gulp压缩css、js、html、图片_第5张图片

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

Gulp初学体会,从零安装并使用Gulp压缩css、js、html、图片_第6张图片

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

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

Gulp初学体会,从零安装并使用Gulp压缩css、js、html、图片_第7张图片

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

Gulp初学体会,从零安装并使用Gulp压缩css、js、html、图片_第8张图片

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

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

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

:nvm install [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  :卸载指定版本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 进行安装结果测试,成功安装截图如下。

Gulp初学体会,从零安装并使用Gulp压缩css、js、html、图片_第9张图片

 

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

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

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

Gulp初学体会,从零安装并使用Gulp压缩css、js、html、图片_第10张图片

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'));
});

Gulp初学体会,从零安装并使用Gulp压缩css、js、html、图片_第11张图片

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'));
});

Gulp初学体会,从零安装并使用Gulp压缩css、js、html、图片_第12张图片

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);
});

Gulp初学体会,从零安装并使用Gulp压缩css、js、html、图片_第13张图片

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'))
);

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

你可能感兴趣的:(Gulp,Gulp)