（33）Gulp构建脚本文件

最新推荐文章于 2023-03-19 18:56:57 发布
最新推荐文章于 2023-03-19 18:56:57 发布
阅读量508 收藏
点赞数
分类专栏： Node.js 文章标签： gulp 前端 node.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36213140/article/details/122481105
版权

一、构建脚本文件流程图

构建脚本文件和我们构建样式文件是一样的，也是将源代码进行编译，编译以后压缩，然后重命名，最终成为目标文件。

这里脚本文件压缩是将ES6语法转换成ES5语法，比如说箭头函数，它在IE浏览器下是不支持的，需要转换成ES5的语法，IE浏览器才能够支持。

二、Gulp构建脚本文件所需要的插件

三、Gulp构建脚本文件示例

1.再我们之前写的Demo中，我们继续再src目录下，新建一个scripts文件，再scripts文件下，新建一个main.js文件，并写入一个ES6的箭头函数。

2.安装编译包（npm gulp-babel -D）
打开http://gulpjs.com 官网

最低0.47元/天 解锁文章
泽哥ins
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
gulp使用babel的坑
ding1885的博客
03-17 1072
首先安装gulp-babel 发现gulp-babel没有安装上，package.json里面没有记录依赖 ** 然后重装一下就安上了 接下来，在gulpfile.js里面写下这段配置 var gulp = require("gulp"); var babel = require("gulp-babel"); gulp.task('default', functi...
解决vue运行报错 if (process.env.NODE_ENV === ‘production‘) 和 打包报错Error in plugin “gulp-shell“
weixin_44982333的博客
04-11 1万+
启动的报错 <% if (process.env.NODE_ENV === 'production') { %> <% }else { %> <% } %> 打包的报错 throw new TypeError('Invalid Version: ' + version); ^ TypeError: Invalid Version: E:\����...
gulp
youhan26的专栏
11-09 846
gulp 一、前言 gulp是一个适用于javascript的构建工具，能自动执行已定义的常见任务，如语法检测（jshint）、测试（mocha）、压缩（uglify）等。其相当于maven之于java。 还有一个更早出现的构建工具grunt，其也提供了gulp的功能，且功能更为强大，但其在配置及使用上更为繁琐，其实现的理念也导致其编译效率较低，新出现gulp的出现正是为了解
彻底解读剪不断理还乱的\r\n和\n, 以Windows和Linux为例
热门推荐
认知 行动 坚持
05-16 3万+
多数程序员都会在不经意间遇到下面这两个问题： 1. linux上用vim写的文件test.txt拷贝到windows上， 结果所有的内容都显示在一行中。（当然， 如果你Windows上的编辑显示器够智能， 那就是另外一回事了） 2. Windows上建立的test.txt拷贝到linux上， 结果linux程序运行异常。（当然， 如果你的linux程序足够健壮
gulp构建项目（七）：gulp-uglify压缩js以及检查js语法错误
猿始森林
12-01 6431
需求分析：将js文件压缩成一行，减少js文件的大小。压缩过程中如果遇到js语法错误，将会报错并且压缩会被终止。所以我们需要 1、在开发环境下，编写js代码时，要监听并检查js文件的语法，避免语法错误导致最后生产环境打包压缩js时失败的问题 2、在生产环境时，压缩js时保证没有语法错误，或者说提供检查语法错误的task，以方便检查错误 一、安装gulp-uglify和pump模块 说明：使用p...
gulp解决跨域的配置文件问题
08-30
gulp是一个基于流的自动化构建工具，可以帮助我们自动化Web应用程序的构建、测试和部署过程。在这个例子中，我们将使用gulp来解决跨域的配置文件问题。 首先，我们需要引入gulp和相关插件，包括gulp-connect和...
gulp-js-templates:构建脚本导入模板
05-01
gulp-js-模板 将模板文件添加到javascript对象。 安装 npm install gulp-js-templates 基本用法 var jtpl = require ( 'gulp-js-templates' ) ; gulp . task ( 'templates' , function ( ) { return gulp . src ( '...
gulp构建seajs模块案列
09-09
在“gulp构建seajs模块案例”中，我们主要关注的是如何利用`gulp`来处理Seajs模块。Seajs是一个流行的JavaScript模块加载器，类似于AMD（异步模块定义）中的RequireJS，但采用了CMD（Common Module Definition）规范...
gulp前端自动化配置文件
11-16
在现代前端开发中，自动化构建工具扮演着至关重要...如果你的项目中包含名为“gulp前端自动化配置文件”的压缩包，解压后将找到完整的Gulp配置，只需根据自己的项目需求进行适当调整，即可快速启动你的前端自动化构建。
gulp-babel：Babel的Gulp插件
01-28
本自述文件适用于gulp-babel v8 + Babel v7检查以了解使用Babel v6的文档 古尔巴比尔 立即与一起使用下一代JavaScript 输出的问题应在Babel上报告。 安装 安装gulp-babel ，如果你想要得到的下一个版本发布前gulp-babel 。 # Babel 7 $ npm install --save-dev gulp-babel @babel/core @babel/preset-env # Babel 6 $ npm install --save-dev gulp-babel@7 babel-core babel-preset-env 用法 const gulp = require ( 'gulp' ) ; const babel = require ( 'gulp-babel' ) ; gulp . task ( 'default' , ( ) => gulp . src ( 'src/app.js' ) . pipe ( babel ( { presets : [ '@babel/preset-env' ] } )
building-with-gulp:使用 gulp 创建前端构建脚本的指南
07-06
本文将深入探讨如何使用`gulp`这一流行的JavaScript构建工具来创建高效且可维护的前端构建脚本。 `gulp`是基于Node.js的流式构建系统，它的核心概念是通过流（stream）处理文件，这使得处理大量文件变得非常快速和...
gulp创建一个文件基本步骤
coffee豆丿
04-11 1308
gulp创建一个文件基本步骤
gulp的配置文件
qq_36711388的博客
05-05 1036
1. 全局安装 gulp： $ npm install --global gulp 2. 作为项目的开发依赖（devDependencies）安装： $ npm install --save-dev gulp 3. 在项目根目录下创建一个名为 gulpfile.js 的文件： var gulp = require('gulp'), // concat = require('gulp-con...
gulp的用法
qq_50626966的博客
03-19 284
pipe( gulp.dest('./dist/css') ) // 将 打包压缩的文件存储到css文件夹中。return gulp.src('./src/js/*.js') // 按照路径导入js文件内容。.pipe( gulp.dest( './dist/message' ) ) // 直接存储到指定的文件夹中。// 存储到指定的文件夹中。
gulp常用方法
soos的博客
08-08 2886
gulp常用方法有以下几种： gulp.src()入口文件路径 gulp模块的src方法。用于产生数据流，它的参数表示所要处理的文件，一般有以下几种： js/index.js：指定确定的文件名 js/*.js：某个目录下所有后缀名为js的文件 js/**/*.js：某个目录及其所有子目录中所有后缀名为js的文件 !js/index.js：除了js/index.js以外的所有文件 此处的...
Gulp的使用
2301_76702774的博客
03-18 1918
gulp是一个，主要用来设定程序的工作。简单的说，gulp就是用来的，可以将指定的文件按照设定好的打包压缩规范，压缩之后存储到指定的文件夹位置。之前gulp程序有自己的运行环境，现在gulp程序可以在node.js中运行。
【任务执行工具】gulp入门
menghen113的博客
03-10 483
gulp入门
grunt、gulp/webpack
最新发布
09-12
Gulp的配置文件通常更简洁和易于理解。开发人员可以通过编写任务函数和使用管道操作符来定义和执行任务。 Webpack是一个模块打包工具，它可以将多个模块打包成一个或多个捆绑包。Webpack可以处理JavaScript、CSS、...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

泽哥ins

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值