Gulp的安装和基本操作_vlambda技术博客

vlambda
2020-08-02

Gulp的安装和基本操作

昨天跟着菜鸟教程把node基础过了一遍，有兴趣的朋友可以上人家的官网自学啊，讲的挺不错的。node就是运行在服务端的 JavaScript，是前端程序员要回会的一种后端语言，主要为了方便前后端数据交互。配置环境的时候确实挺费劲的，大家可以照着教程一步一步来。（记得配置电脑的环境变量，以及看看自己是win * 的系统）

好，开始gulp的学习。

简介：

gulp主要是对代码进行自动化构建，通过配置完成很多重复的任务，提高效率。

功能概览：

Gulp的安装和基本操作

如何使用：

1.首先得确保你电脑中已经安装了node 、npm。打开命令行输入node -v、npm -v查看一下。

Gulp的安装和基本操作

2.确定无误后就可以安装gulp 了，输入npm install gulp -g（全局安装）

Gulp的安装和基本操作

图中没进行全局安装，不要模仿

3.建立文件夹（推荐node安装盘下）、建立gulpfile.js（名称不可更改）、建立src,dist文件夹。完成以后命令行进入gulp-demo文件夹下。（cd /返回上一级，D: 打开D盘，cd gulp-demo 打开文件夹）

Gulp的安装和基本操作

4.建立那么多文件夹终于开始了，打开gulpfile输入以下代码。

// 引用gulp模块const gulp = require('gulp');// 使用gulp.task建立任务// 1任务名称// 2回调函数gulp.task('first',() => { console.log('人生中第一个gulp文件'); gulp.src('./src/css/back.css') .pipe(gulp.dest('dist/css'));});

5.要执行文件的话还得安装一个gulp-cli，同样全局。

Gulp的安装和基本操作

6.命令行执行代码，gulp first

Gulp的安装和基本操作

7.要压缩HTML或者CSS的话还需要安装插件，代码如下：

（新版npm不写 --save 也行）

npm install --save gulp-cssminnpm install gulp-htmlmin

8.压缩HTML（引入gulp-htmlmin模块，名字要和下面保持一致）

// html代码// 1.html代码的压缩// 2.抽取html文件中的公共代码const htmlmin = require('gulp-htmlmin');gulp.task('htmlmin',() => { gulp.src('./src/html/content.html') //压缩html代码 .pipe(htmlmin({collapseWhitespace : true})) .pipe(gulp.dest('./dist/html')); //输出到dist文件夹下的html文件夹下});

压缩前

Gulp的安装和基本操作

压缩后

今天就到这里，祝朋友星期日愉快。

vlambda博客
学习文章列表