gulp的安装和使用

于 2023-03-22 16:45:23 发布
阅读量73 收藏
点赞数
文章标签： gulp 前端 javascript Powered by 金山文档
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_67864752/article/details/129710832
版权

全局安装gulp-cli

命令npm install -g gulp-cli,检测是否安装成功gulp -v

在项目中安装gulp

  1. 使用npm init初始化项目

  1. 局部安装gulp npm i gulp@4.0.2 --save-dev

--save-dev表示将gulp作为devDependencies保存到package.json文件中

安装完成后package.json文件中会出现gulp及其版本号

  1. 构建项目

在项目根目录下创建gulpfile.js文件（注意文件名不能随意更改）

在gulpfile.js文件中编写构建项目的任务

使用gulp first 执行名字为first的任务

结果为

可以看到在dist文件夹里创建了a.css文件

在项目中使用gulp

  1. 压缩并抽取HTML中的公共代码

安装gulp-htmlmin插件

安装gulp-file-include插件

引用插件

创建任务

执行后可以看到

  1. 压缩并转换Less语法

安装gulp-less插件

npm i gulp-less

引用gulp-less插件

const less=require（'gulp-less')

创建d.less文件

创建任务

执行后可以看到

  1. 压缩并转换ES6语法

安装gulp-bable和gulp-uglify

npm i gulp-babel @babel/core @babel/preset-env，@后面表示它所依赖的插件

引用gulp-bable和gulp-uglify

创建base.js

创建任务

结果为

  1. 复制目录

创建任务

结果为

  1. 执行全部构建任务

使用gulp.series()可以顺序执行任务

例如创建一个名为default的任务

执行default任务可以顺序执行后面的任务

Super小佳.
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
node.js 之gulb包详细学习和package.json (持续学习中）
qq_52037321的博客
04-01 879
本文主要介绍 gulp 安装和使用 已经一些插件 还有package.json 用途 和node.js模块加载机制
10分钟入门gulp及gulp插件的使用和package.json文件的作用
weixin_44336981的博客
03-04 1047
gulp： gulp是一个基于node开发的前端构建工具，短小精悍，适合中小型项目辅助，它可以将一系列机械化操作编写成任务，然后在命令行执行这个任务就可以了 一般用来做什么： 项目上线，html、css、js文件压缩合并 语法转换：es6、less 公共文件抽离 修改文件后自动刷新浏览器 等等… 使用： 安装：npm i gulp，库形式的模块，提供API gulp.src：获取要处...
Gulp学习笔记
qilanbei的博客
09-19 466
* 自用笔记：Gulp学习 *Gulp1. Gulp概述gulp是前端开发过程中一种基于流的代码构建工具，是自动化项目的构建利器；不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成；使用它，不仅可以很愉快的编写代码，而且大大提高我们的工作效率 gulp是基于Nodejs的自动任务运行器 她能自动化地完成javascript、coffee、sass、less、html/
gulp的安装及使用（超详细）
qq_53556413的博客
03-21 2634
使用Gulp进行任务自动化可以让前端开 发人员更加高效地构建和管理自己的项 目，并可以大大减少重复的手动操作。
node004 （gulp , package.json , 各类插件引入以及使用）
wafer_biscuit的博客
03-23 187
const fs=require('fs'); //文件操作方法的引入和命名 const str1='这是用fs.writeFile写入文件的内容'; fs.writeFile('nodefile004.txt',str1,(err)=>{ //只会写入一次，而且改变内容会覆盖之前的值 if(err!=null){ //当写入的文件不存在，他会自动帮你创造一个 console.log(err); //打印错误信息 return;
Gulp使用指南，来源于网络
10-13
安装 Node.js 和 Gulp 首先，需要安装 Node.js，访问 <http://nodejs.cn/> 下载安装包进行安装。然后，执行命令安装全局 Gulp：`npm install gulp -g` 安装项目所需 Gulp 插件 在项目的根目录下，依次执行以下...
angular1配合gulp和bower的使用教程
08-28
使用以下命令可以安装 Gulp 和 Bower： `npm install -g gulp` `npm install -g bower` 使用 Bower 初始化项目 使用 Bower 初始化项目非常简单。首先，我们需要使用以下命令创建一个新的 Bower 项目： `bower ...
gulp和webpack1
08-08
Gulp的安装和使用非常简单，只需要按照官方文档或者教程中的指引进行即可。 **Webpack** 则是一个模块打包工具，它的主要目标是将项目中的各种模块（如JavaScript、CSS、图片等）打包成一个或多个可部署的静态资源...
gulp使用教程.pdf
09-13
【gulp使用教程】 ...以上就是gulp的基本使用流程，通过学习和实践，你可以根据项目需求定制自己的构建流程，实现代码自动化处理，提高开发效率。记得持续关注gulp的最新插件和更新，以便充分利用这个强大的工具。
gulp使用教程.docx
09-13
为确保gulp命令在任何目录下都能使用，可能需要将gulp的安装路径添加到系统的环境变量中，例如`C:\Users\asus\AppData\Roaming\npm\gulp`。 ## 五、创建`package.json`文件 在你的项目根目录下，运行`cnpm init`...
gulp:起始gulpfile和package.json
05-02
吞咽 起始gulpfile和package.json
gulp 里的package.json
YingDaoMonkey的博客
09-20 1676
{ "name": "lvchi-wx", "version": "1.0.0", "description": "lvchi-wx ", "main": "main", "scripts": { "test": "echo \"Error: no test s
gulp项目自动化打包构建工具
Joker0322的博客
05-25 547
生产环境：用户访问的项目环境 开发环境：开发人员进行程序代码开发使用的环境 一、gulp项目自动化打包构建工具 --操作对象 项目 --构建打包 将开发环境写的代码构建打包部署到生产环境 二、使用 1、安装gulp 全局安装使用gulp命令： npm i gulp -g 本地安装使...
gulp package.json
weixin_34127717的博客
12-28 106
{ "name": "gulpAngular1", "version": "0.0.0", "dependencies": {}, "devDependencies": { "gulp": "~3.8.10", "gulp-angular-templatecache": "~1.4.2",//template 缓存 "del": "~0.1...
一个全面详细的gulp工作流
(づ｡◕‿‿◕｡)づgigi奋斗在前端和刷题中╮(╯﹏╰)╭
07-26 3854
开发dev gulp-load-plugins 使用gulp-load-plugins模块，可以加载package.json文件中所有的gulp模块，而不用一个一个地去加载。 var gulp = require('gulp'), gulpLoadPlugins = require('gulp-load-plugins'), $= gulpLoadPlugi
npm安装package.json中的模块依赖
热门推荐
淡风wisdon－大大的博客
03-04 2万+
 package有两种依赖：       1. dependencies —— 运行依赖，依赖的项该是正常运行该包时所需要的依赖项      2. devDependencies —— 开发依赖，开发的时候需要的依赖项，像一些进行单元测试之类的包。常用两种情况：1.package.json不存在时    运行命令: npm init可自动创建package.json文件2.package.json...
关于gulpfile.js和package.json
innocencepj的博客
12-13 3536
1、package.json: 执行npm init之后会在当前工作目录下创建一个全新的package.json文件，可以在命令台中根据引导进行配置。包的定义和npm都围着package.json做文章，package.json主要用于存放模块的名称、版本、作者、机构、模块入口、依赖项等信息。在配置好依赖项后，npm install命令可以安装package.json中的全部开发依赖项（devDep
npm的package.json和package-lock.json更新策略
Hello博客
04-19 2万+
如果你之前用npm 安装产生了package-lock.json，后面的人用cnpm来安装你的package.json、package-lock.json安装可能会跟你安装的依赖包不一致，这是因为cnpm 不受package-lock.json影响，只会根据package.json进行下载。 npm、cnpm与package-lock.json的操作 npm install package-lo...
win10 localhost 解析为::1 的解决办法
diangaoyi3798的博客
05-19 240
问题如图所示： 在cmd中ping localhost解析出来的是IPV6的::1，原因是windows有个优先解析列表，当ipv6的优先级高于ipv4时，就会出现这种情况。网上有一种方法是修改注册表的，具体方法为：打开RegEdit，导航到HKEY_LOCAL_MACHINE \ SYSTEM \ CurrentControlSet \ Services \ tcpip6 \ P...
linux 安装gulp
最新发布
09-14
3. 安装完Node.js和npm后，您可以使用npm来全局安装Gulp。运行以下命令来安装Gulp： ``` sudo npm install -g gulp ``` 这将在您的系统上全局安装Gulp。 4. 安装完成后，您可以通过运行以下命令来验证Gulp是否已...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值