搜文章
推荐 原创 视频 Java开发 iOS开发 前端开发 JavaScript开发 Android开发 PHP开发 数据库 开发工具 Python开发 Kotlin开发 Ruby开发 .NET开发 服务器运维 开放平台 架构师 大数据 云计算 人工智能 开发语言 其它开发
Lambda在线 > 小卖铺 > Gulp的安装和基本操作

Gulp的安装和基本操作

小卖铺 2020-08-02



昨天跟着菜鸟教程把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的安装和基本操作


压缩后



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

   




版权声明:本站内容全部来自于腾讯微信公众号,属第三方自助推荐收录。《Gulp的安装和基本操作》的版权归原作者「小卖铺」所有,文章言论观点不代表Lambda在线的观点, Lambda在线不承担任何法律责任。如需删除可联系QQ:516101458

文章来源: 阅读原文

相关阅读

关注小卖铺微信公众号

小卖铺微信公众号:gh_7de9dfc39421

小卖铺

手机扫描上方二维码即可关注小卖铺微信公众号

小卖铺最新文章

精品公众号随机推荐

上一篇 >>

前端规范梳理