[JS 文件编译错误] 以下文件体积超过 500KB，已跳过压缩以及 ES6 转 ES5 的处理 现象： 微信开发者工具中代码编译提示 common/vendor.js 超过 500K。...这时候需要将过大的js文件压缩。 解决办法： 可以使用gulp进行压缩。...新建一个用于压缩的目录，在目录内创建package.json { "name": "gulp", "version": "1.0.0", "description": "", "main..., function () { // 找到需要压缩的文件 return ( gulp .src('文件名.js') // 压缩文件 .pipe(uglify...然后在 dist 目录下就可以找到你需要的 js 了。 最后把过大的文件替换掉就可以了。
在前几年的时候，前端是一片荒芜的待开垦之地，开发者更多考虑开阔更多技术疆域；而最近几年，在前端技术这种更新迭代快到连裸奔都追不上的情况下，在强调高产的同时，效率必然是成为争夺的制高点。...Sass（gulp-sass） Sass 是与 Less 并举的 CSS 预处理器，一种全新的CSS 编码方式。...文件清理功能（gulp-clean） 在项目完成可以删除一些多余的文件 任务错误中断自动重传（gulp-plumber） 好吧，“任务错误中断自动重传”是我瞎命名的。...默认的 Gulp 任务在执行过程中如果出错会报错并立即停止当前工作流（如在 watch Sass编译时候恰巧 Sass代码写错了）。使用plumber 模块可以在纠正错误后继续执行任务。...当然，本人的认知非常有限，不敢保证上面的东西有没有错误（特别是讲到历史故事那部分），如果有错误欢迎雅正！
本文尝试利用 gulp 和 gulp-mathjax-page 将公式直接渲染为 SVG 并嵌入 HTML，以实现静态化，支持任何 Hexo 主题。同时，支持化学方程式?。...操作步骤 1）安装 1 2 ~/blog $ npm i -g gulp@3.9.1 ~/blog $ npm i -S gulp@3.9.1 gulp-mathjax-page 2）新建 1 2...('gulp') var mathjax = require('gulp-mathjax-page') gulp.task('mathjax', function() { gulp.src('...麦克斯韦为了解释电容器可以通交流这个现象，在毕奥沙伐尔定律后面加上 $\mu_0\epsilon_0\frac{\partial\mathbf E}{\partial t}$（位移电流假说），于是将本来独立的四个方程紧紧联系在一起...提示说明 由于有些语法与 Markdown 语法的冲突，因此可能会有错误，建议加转义符，比如：下标 \_，换行 \\\\。如果还遇到莫名的报错，在适当位置加空格，然后调试直到没问题。
在上图中，index.ts是示例的入口文件，2d与3d目录分别对应着引擎的2D与3D示例。 由于引擎源码是TS语言的，所以示例也是基于TS源码的示例。...四、如何运行查看LayaAir引擎示例 为了验证我们的编译与项目环境没有问题，我们先把默认的示例给编译运行起来看一看。...由于引擎源码目录中，已经配置好gulp任务，可以直接在VSCode中通过 Ctrl + Shift + B 运行gulp任务（gulp:LayaAirBuild），启动编译。如下图所示： ?...当然，我们也可以在VSCode中通过F5或者Ctrl + F5，自动启动gulp任务，进行代码的编译。 效果如下图所示： ?...七、如果出现引用路径错误的解决方案 在编写自定义示例时， 如果出现VSCode自动引用路径错误的现象，如下图所示： ? 需要检查 TypeScript版本，如下图所示： ?
/admin/' } // 引入 gulp let gulp = require('gulp'); // 引入gulp相关插件 let concat = require('gulp-concat...所以就会出现上面代码中的样子；一段代码中出现大量的 let，只有部分常量用 const 去做定义，这样的使用方式是错误的。...你可能不知道的事 const 的定义是不可重新赋值的值，与不可变的值(immutable value)不同；const 定义的 Object，在定义之后仍可以修改其属性。...插播：原来我们定义这个中间变量还有一个有趣的现象，就是明明千奇百怪，例如self, that, me, _that, _me, Self......Promise 需要调用 catch 方法来捕获错误，而且过程内的错误不会阻塞后续代码执行 new Promise(() => { f; // not define error !
最近一段时间，在做一个很古老的项目，简直是上古时期的写作方式了。...还是那些传统的方式，一个页面从上到下引入几十个「js」文件，里面到处充斥着 jquery 的 DOM 操作，维护起来相当的糟糕，变量与函数之间跨文件引用。...接下来，我们就直接进入主题，废话不多少，如何利用 gulp 去做代码的压缩与混淆。 至于 gulp 是什么我就不做过多的解释了，它是一个自动化的构建工具。...的文件 var gulp = require('gulp'); gulp.task('default', function() { //需要处理的任务 }); 运行 gulp taskname.../dist/js") }); 以上，就可以愉快的一键压缩我们的代码了，当然项目中肯定不止这么简单的需求，还有更多更玩的，大家可以根据自己的需求定制一些个性话东西。
npm (node package manager): node的第三方模块管理 工具 下载: npm install 模块名称 卸载: npm unintall package模块名称 全局安装与本地安装...下载nrm第三方模块时会出现以下错误 错误情况： 执行命令npm install nrm -g下载完nrm模块后查询下载地址列表会报错，无法加载文件，因为在此系统上禁止运行脚本。...Gulp中提供的方法 gulp.src(): 获取任务要处理的文件 gulp.dest(): 输出文件 gulp.task(): 建立gulp任务 gulp.watch(): 监控文件的变化.../src/css/base.css') //将处理后的文件输出到dist目录 .pipe(gulp.dest('./dist/css')) ; }) ; 可能会出现如下错误： ?...'copy']);此代码执行会报以下错误，需添加gulp.series()将任务函数组合操作 gulp.task('default', gulp.series(['first', 'htmlmin'
下载: npm install 模块名称 卸载: npm unintall package模块名称 全局安装与本地安装 命令行工具:全局安装 库文件:本地安装 3.第三方模块nodemon...Gulp中提供的方法 gulp.src(): 获取任务要处理的文件 gulp.dest(): 输出文件 gulp.task(): 建立gulp任务 gulp.watch(): 监控文件的变化...const gulp = require('gulp'); //使用gulp.task()方法建立任务 gulp.task(' first', () => { //获取要处理的文件.../dist/css')) ; }) ; 可能会出现如下错误： 此时需在回调函数里添加结束回调done const gulp = require('gulp'); //使用gulp.task()方法建立任务...'copy']);此代码执行会报以下错误，需添加gulp.series()将任务函数组合操作 gulp.task('default', gulp.series(['first', 'htmlmin'
输入 node -v 回车查看 2.2Node环境安装失败解决办法 1.错误代号2502、2503 失败原因:系统帐户权限不足。 ?...; exports是module.exports的别名(地址引用关系)，导出对象最终以module.exports为准 4.8模块导出两种方式的联系与区别 ?...注意： 读取文件是硬盘的操作，需要耗时，我们需要回调函数的方式获取文件读取的结果 这个回调函数包含两个参数 err，doc err是一个对象，包含错误信息 如果文件读取出错，返回err，错误信息...下载: npm install 模块名称 卸载: npm unintall package模块名称 全局安装与本地安装 命令行工具:全局安装 库文件:本地安装 6.3第三方模块.../src/css/base.css') //将处理后的文件输出到dist目录 .pipe(gulp.dest('./dist/css')) ; }) ; 可能会出现如下错误： ?
前言 最近几年前端技术发展日新月异，特别是单页应用的普及。组件化、工程化、自动化成了前端发展的趋势。...webpack已经成为了前端打包构建的主流，但是一些`老古董`的项目还是存在的，也有优化的必要，正好公司的老项目需要优化，不多说拿gulp实践一下。...实践 创建项目目录 首先初始化npm依赖项与基本信息，使用命令npm init一直回车，生成package.json文件，也可以直接去上边github仓库目录下载。...你的项目目录关系到你的gulp脚本里的任务路径，我脚本里写的是匹配所有的目录和文件。我简单举个例子：这里js/common里的js文件也会被处理。如果只想处理特定目录的文件，请修改任务里的路径。...具体关于路径的写法，可以去看gulp官网的api：https://www.gulpjs.com.cn/docs/api/ gulp-minify-css这个官网提示已经弃用，改用gulp-clean-css
由于没有模块化原因，代码中充斥着大量的全局变量，对面向对象和设计模式运用的很少。 现象：资源管理混乱，代码效率低下，无法驾驭复杂的业务场景。...cocos H5在资源管理上与cocos c++/lua最大的区别是“异步加载”，这也是疑惑的问题之一。 3. 编写的代码不能在原生上运行。...Grunt & Gulp Grunt是Javascript世界的构建工具，对于需要反复重复的任务实现自动化，自动化工具可以减轻你的劳动，简化你的工作。...CocosCreator中集成的自动化构建工具就是 Gulp，你也可以在安装目录中找到相关脚本文件。...建议在新项目中使用 ES6新的语法规范，同时也能保持与 Javascript 语言的与时俱进。 5.
搭建一个简单的前端应用 相比较webpack，其实gulp的项目结构更偏向传统的应用，只是我们借助gulp工具解放我们的一些代码压缩、es6编译、打包以及在传统项目中都可以使用less体验。...申明的变量就变成了es5了 通常情况下，一般打包后的dist下的css或者js都会被压缩,在gulp中也是需要借助插件来完成 压缩js与css 压缩js ... const teser = require...创建的服务文件夹存在，不然页面打开就404错误 npm run server 至此gulp搭建一个简单的应该就已经完全ok了 这页面背景貌似有点黄 总结 gulpjs开发是一个任务流的开发方式，它的核心思想就是用自动化构建工具增强你的工作流...用gulp写了一个简单的应用，但是发现中途需要找好多gulp插件，gulp的生态还算可以，3w多个star，生态相对丰富，但是有些插件常年不更新，或者版本更新不支持，比如gulp-image，当你按照官方文档使用最新的包时...即使项目时间再多，也不要用gulp搭建前端应用，因为webpack生态很强大了，看gulp的最近更新还是2年前，但是写个自动化脚本，还算可以，毕竟gulp的理念就是用自动化构建工具增强你工作流程，也许当你接盘传统项目时
本文内容概要： 1 什么是Gulp 2 Gulp VS Grunt 3 Gulp的安装与使用 4 命令行的简单介绍 1 什么是Gulp Gulp是一个前端自动化构建工具，在项目开发过程中，开发工程师可以使用它自动化地完成...，利用Node.js流的威力，你可以快速构建项目并减少频繁的IO（文件写入与读取）操作； 高质量：Gulp有严格的插件指南确保插件如你期望的那样简洁高质的工作，而且Gulp的每个插件只完成一个功能，各个功能通过流进行整合并完成复杂的任务...）； 3 Gulp的安装与使用 在学习Gulp之前，先给大家大致的介绍一下Gulp的安装与使用。...双击安装包，一直下一步即可，Node.js会自动把环境变量配好~ 如果你使用的是Windows8的话，有可能报错。error 2502，error2503错误原因是你的权限不够。...3.1.3 项目安装Gulp 说明：项目安装Gulp的目的是为了调用Gulp的插件，比如调用gulp-less插件，它是将LESS预处理为CSS的插件。
大家好，又见面了，我是你们的朋友全栈君。 Yarn是Facebook最近发布的一款依赖包安装工具。...Yarn是一个新的快速安全可信赖的可以替代NPM的依赖管理工具 快速安装 //在NPM 中安装 npm install -g yarn MacOS 在Mac上安装比较方便，使用初始化脚本即可 1 curl...1 yarn --version PS: 如果抛出错误yarn: command not found ,你可以去这里找下解决方法，应该都可以解决的 开始使用 我们新建一个文件夹yarn测试下 输入命令...: yarn init 一路enter下去就行 然后我们试着加一些依赖： 1 yarn add gulp-less 如果加入具体版本可以后面写上@0.x.x 这样子 Po主试着装了三个gulp插件...，这个时候package.json里面是这个样子的： 如果你要移除的话，可以使用yarn remove package_name 比如： 1 yarn remove gulp-less 升级更新某个依赖可以使用这个
就算不会写，也得了解它的原理吧！ 最近做了一些总结，之前都是迷迷糊糊，搞不清楚前端之前的相关定位。好好梳理了一下。错误之处请各位指正。...带着这些疑问，作为一个后端程序员，进行了系列调查，要把我的成果分享出来（可能错误百出）。 首先前端开发的三大基础： html 这个是最基础的，被称为：超文本标记语言。什么意思？...在Web世界里，只有JavaScript能跨平台、跨浏览器驱动网页，与用户交互。 功能越强大，责任也越多。...合并文件、压缩代码、检查语法错误、将Sass代码转成CSS代码等等这些都是开发中的重复性任务，以前这些任务都需要单独人工解决，然后为了提高效率，早点下班，就有了:Gulp Grunt这些task runner...所以模块打包的问题也解决了，另外说一句，gulp的部分功能可能通过webpack的插件也能解决，但并不意味着不再需要它，一般来说gulp运行在webpack之后。
最近参与了APP内嵌H5页面的开发，这次使用vuejs替代了jQuery，仅仅把vuejs当做一个库来使用，效率提高之外代码可读性更强，在此分享一下自己的一些开发中总结的经验。...由于使用第三方的接口，一开始也没有先进行接口返回数据结构的查看，采用了第一种错误的方式，错误一是每种登陆方式下面的登陆要素的数量也不同，错误二是数据绑定在同一个表单data下，当用户在用户名登陆方式输入用户名密码后...在项目构建的时候通常我们源代码会放在src文件夹下，然后使用gulp进行代码的压缩、合并、图片的优化（根据需要）等等，我们会使用gulp。...这里解决跨域的问题可以用gulp-connect结合http-proxy-middleware，此时我们在gulp-connect中的本地服务器进行预览调试。...gulpfile.js如下： 开发过程使用gulp server命令，监听文件改动并使用livereload刷新；使用gulp命令进行打包。
最近读了 Why I Left Gulp and Grunt for npm Scripts。读完后，觉的这文章写的相当不错，就决定尝试下。 下面先简单介绍下 npm Scripts。...将 源代码目录下的除了 ES6 和 Sass 代码外的其他代码都移动到发布文件目录下。用 Gulp。用 Gulp 是为了跨平台，如果不要跨平台，可以用当前平台的命令行的命令来做移动目录会更简单。...} 发布时只需执行 npm run build Happy Coding~ ps: 最近刚拿到 «程序员健康指南» ，就有点扁桃体发炎，是要我赶快看那书的节奏么~ 大家也要注意身体那。...参考链接 Why I Left Gulp and Grunt for npm Scripts 我为何放弃Gulp与Grunt，转投npm scripts[译] react-slingshot npm-scripts...---- 本文遵守创作共享CC BY-NC-SA 4.0协议 网络平台如需转载必须与本人联系确认。
修己安人，内圣外王 最近，在开发Node项目过程中遇到了需要类jQuery深拷贝对象的问题，去Github找了半天，并没有符合的，于是，自己决定写一个（mixin.js），然后推送到NPM（查看Npm...language: node_js node_js: - "4" 压缩打包 项目中，使用gulp进行压缩代码 var gulp = require('gulp'); var uglify = require...('gulp-uglify'); var rename = require('gulp-rename'); gulp.task('default', function () { gulp.src...npm search发现该项目； license：开源声明； 类型 说明 General Public License，简称GPL 运行、复制软件的自由，发行传播软件的自由，获得软件源码的自由，改进软件并将自己作出的改进版本向社会发行传播的自由...BSD 可以自由的使用，修改源代码，也可以将修改后的代码作为开源或专有软件再发布 Massachusetts Institute of Technology，简称MIT 赋予软体被授权人更大的权利与更少的限制
root ： nvm的存放地址 path ： 存放指向node版本的快捷方式，使用nvm的过程中会自动生成。一般写的时候与nvm同级。...检查环境变量是否配置成功：可以在控制台输入：set [环境变量名]，查看路径是否填写错误 5....注意-g可以直接放到install的后面，我们以后也最好这样用，因为这样用，我们可以在cmd中上下箭头切换最近命令的时候，容易修改，更方便操作。安装完成后，我们就可以使用了。...gulp是引入开发过程中的一些小工具，生产模式不需要gulp 本示例以gulp-less为例（将less编译成css的gulp插件）展示gulp的常规用法，只要我们学会使用一个gulp插件后，其他插件就差看看其帮助文档了...2、首先确保你已经正确安装了NODE环境，然后以全局方式安装gulp npm install -g gulp 全局安装完gulp后，还需要在每个要使用gulp的项目中单独安装一次，把目录切换到你的项目文件夹中
引言 自动化构建是现代软件开发中不可或缺的一环。它可以大幅提高开发流程的效率、减少人为错误，并确保交付高质量的软件。...自动化构建的作用 2.1 自动化任务 自动执行任务，如编译、压缩、测试和部署，减少了手动操作的繁琐性。 2.2 错误减少 减少了人为错误的风险，确保每次构建都是一致的和可重复的。...// 示例：使用Gulp任务来压缩CSS文件 const gulp = require('gulp'); const minifyCSS = require('gulp-minify-css'); gulp.task...7.3 DevOps集成 将自动化构建与DevOps流程集成，实现持续交付和部署。 8....结语 自动化构建是现代软件开发的重要组成部分，它通过减少手动工作、减少错误和提高代码质量，提高了开发流程的效率和软件的质量。
领取专属 10元无门槛券
手把手带您无忧上云
