版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/j_bleach/article/details/53047467
Grunt和Gulp是Javascript世界里的用来做自动压缩、Typescript编译、代码质量lint工具、css预处理器的构建工具,它帮助开发者处理客户端开发中的一些烦操重复性的工作。Grunt和Gulp都在Visual studio 2015中得到支持。ASP.NET 项目模板默认使用Gulp。 Grunt和Gulp Grunt和Gulp有什么区别?Gulp虽然是稍微晚一点登场的,但是它因crisp performance和优雅的语法受到欢迎。与Grunt不同,Grunt往往在硬盘上是读写文件,G
在前面几节我们学到了gulp 对外暴露的常用的几个 API,gulp 本身的 api 并不是很多,这一节我们就统一的来过一遍,最这些 API 有个认识。
什么是 gulp 简单的讲,gulp 是一个构建工具,一个基于流的构建工具,一个 nodejs 写的构建工具,使用 gulp 的目的就是为了自动化构建,提高程序员工作效率😂。 入门指南 全局安装 gulp: $ npm install --global gulp 作为项目的开发依赖(devDependencies)安装: $ npm install --save-dev gulp 在项目根目录下创建一个名为 gulpfile.js 的文件: var gulp = require('gulp'); // 默认
前段时间折腾Gulp,主要是搜寻一些插件,组合之以优化前端开发流程。这段折腾历程除了达成所愿外,给予最大的收获是:只要你想实现某功能,基本就已有对应插件供使用;所需要做的只是去发现她,外加”临幸”她而
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/j_bleach/article/details/53053500
模块加载痛点 大家也或多或少的了解node模块的加载机制,最为粗浅的表述就是依次从当前目录向上级查询node_modules目录,若发现依赖则加载。但是随着应用规模的加大,目录层级越来越深,若是在某个模块中想要通过require方式以依赖名称或相对路径的方式引用其他模块就非常麻烦,影响开发效率和美观。 示例demo: // 当前目录: /usr/local/test/index.js // gulp模块所在路径为 /usr/lib/node_modules var gulp = require('../.
Gulp安装流程、使用方法及CMD常用命令导览 来自前端小白的gulp及周边知识学习总结 一、名词介绍: Npm——node包管理工具 一开始我不理解,包管理工具是什么鬼。后来用到的gulp也好,gulp的插件包也好,都是要在npm这个里边弄出来的。 可以理解为,一个硬盘,里边放的各种整理好的、适用于各种功能的且不重复的文件夹(插件),然后我们需要啥,就去里边摘下来。 当然也可以用它来删除插件 rimraf删除gulp的模块插件 1、安装:npm install -g rimraf(全局安装),如果
这个方案主要是为了实现js/css/image的压缩合并、自动添加版本号、自动加浏览器前缀和压缩html。
构建工具是一个把源代码生成可执行应用程序的过程自动化的程序(例如Android app生成apk)。构建包括编译、连接跟把代码打包成可用的或可执行的形式。
可能很多人对于gulp都相对陌生,特别是vue,react出现以后,渐渐淡出了做业务前端人员的视野,14到16年的时候应该是它最巅峰的时候,真正的是出道即巅峰,取代了当时最火的grunt成为了前端构建的主流工具,就连某度都忍不住来瓜分一下流量,出了个fis(不过按照烂尾的惯例来看,基本会属于后继无人的状态,所以没有真正去用在生产项目中过),而且当时webpack虽然已经出现,但完全不能跟gulp抗衡,直到vue,react等spa项目出现,才让webpack取而代之,gulp也逐渐退出幕前,转战幕后,去做了它更擅长的事情:前端开发流程规范管理。
目前做代码压缩合并的工具有很多,诸如gulp,webpack,grunt等等,可以说这些项目构建工具的功能非常之强大:图片压缩、图片转base64、css和js的压缩以及合并,文件的md5重命名 ……。本人之前也是在项目中没具体使用过,闲来无事,查查资料,自己写了一个用gulp工具的小demo,有很多不足之处,欢迎指点。 第一步:安装node和npm 不用说,要用gulp,得先安装node和npm(安装完node后,自带有npm) Node官网下载地址:https://nodejs.org/en/downl
写好的、具有特定功能的、我们能直接使用的模块即第三方模块,由于第三方模块通常都是由多个文件组成并且被放置在一个文件夹中,所以又名包。
浏览器(软件)能够运行JavaScript代码,浏览器就是JavaScript代码的运行环境
地址:https://github.com/huiwang/hexo-baidu-url-submit
Gulp是一个在你开发web时,帮助你完成几个任务的工具。它经常用来进行一些前端任务,比如:
gulp是趋势 gulp完全开发指南 => 快来换掉你的Grunt吧 gulp的工作流程:文件流--文件流--文件流......因为grunt操作会创建临时文件,会有频繁的IO操作,而gulp使用的是
作者:龙付成--腾讯高级前端工程师 @IMWeb前端社区 目录 JavaScript早期主要作为脚本语言运行在浏览器,而现在JavaScript的使用范围已经超越浏览器,向通用系统语言发展。特别是HTML5的出现,浏览器的平台化,Node.js开源项目的发展,NoSQL技术的发展,JavaScript逐渐成为跨移动平台应用程序及跨平台桌面应用程序的开发语言。 JavaScript标准有两类,一种是作为浏览器上通用行业标准的ECMAScript标准,另一种是作为浏览器外的桌面、服务器的标准CommonJS标
在该项目路径下,我们独立安装gulp:npm install gulp 。此时会生成一个 node_modules 文件夹和一个 package-lock.json 文件,如下图:
微注: 前端更新实在是迅捷!谈及前端打包工具,Gulp 取代 Grunt荣登王者,其宝座还未热乎,16年 Webpack 便劈天盖地席卷而来。即便笔者在记叙这篇文章时候,也早已是投身于 Webpack 的石榴裙下, 且少使用Gulp了;所以,于此你应该有所考量。当然,Gulp很强大,辅助完成些脚本,也是很好的存在,譬如生成雪碧图、Sftp服务器上传等;且在2016年中也更新到4.0——一个很吸引人的版本。(Update@17/01/16) Gulp-sftp的喜忧路 一路从Xftp,winScp,Subli
📷 别被标题吓到,哈哈,即使现在vite横空出世,社区光芒四射,两个字很快,但是webpack依旧宝刀未老,依然扛起前端工程化的大梁,但是今天我为啥说要拥抱gulp,因为我们常常吃一道菜,所以要换个口味,这样才营养均衡🤣。 gulp定义是:用自动化构建工具增强你的工作流程,是一种基于任务文件流方式,你可以在前端写一些自动化脚本,或者升级历史传统项目,解放你重复打包,压缩,解压之类的操作。 个人理解gulp是一种命令式编程的体验,更注重构建过程,所有的任务需要你自己手动创建,你会对构建流程会非常清楚,这点不像
整理自 MDN web docs 的笔记,同时参考了 Web Bos 上的什么是 Flexbox系列视频。
概述: 案例:Cesium打包流程,相关技术点和大概流程 原理:代码优化的意义:压缩 优化 混淆 优化:如何完善Cesium打包流程 关键字:Cesium gulp uglifyjs 字数:2330 | 阅读时间:7min+ 1 Cesium打包流程 如果没有记错,Cesium从2016年初对代码构建工具做了一次调整,从grunt改为gulp。作为一名业余选手,就不揣测两者的差别了。个人而言,gulp和Ant的思路很相似,通过管道连接,都是基于流的构建风格,而且gulp更像是JS的编码风格,自带一种亲切感。
上述代码会将src/test里面的所有js文件合并,压缩成一个文件并保存到./bunld/js/bundle.min.js 运行命令
gulp 是一个构建工具,基于Node.js的平台运行,使用的是commonJs的模块化语法。 我们使用gulp需要用到的包 一个TASK任务,对应一个包,对应一个处理逻辑、 gulp.series对应的是同步任务,从左到右,依次执行任务。时间长 gulp.parallel对应的是异步任务,效率高,时间短。 gulp.src 表明文件从哪里读取 gulp.dest 表明文件输出到哪 const gulp = require('gulp'); //gulp的包 const eslint = req
第一次接触gulp,当参考各方资料翻译下来,感觉还不如自己总结一份来的流畅,所以这篇最后将自己的实践放在开始,将之前的原文与译文放在最后以供参考。
前言: gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器;她不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成;使用她,我们不仅可以很愉快的编写代码,而且大大提高我们的工作效率。相比于grunt的频繁 IO 操作,gulp的流操作,能更快地更便捷地完成构建工作。此处仅记录初步折腾中所遇点滴以及待解决的点。 Gulp折腾之初探 折腾之战略上的藐视 回过头看Gulp的折腾历程,使用还是非常简易的。初步入门资料可参考这里。所以战略上一定要藐视”她”;当然战术上要
gulp能够帮助用户自动压缩静态资源,配合各类下属插件,能够压缩包括css、js、html乃至各类格式的图片文件。(图片文件的压缩往往只能节省几十KB,效果远远不如imagine、tinypng等压缩方式,所以此处不再写使用gulp压缩图片的内容)。
一个功能就是一个模块,多个模块可以组成完整应用,抽离一个模块不会影响其他功能的运行。
在网页开发的早期,js制作作为一种脚本语言,做一些简单的表单验证或动画实现等,那个时候代码还是很少的。那个时候的代码是怎么写的呢?直接将代码写在<script>标签中即可。随着ajax异步请求的出现,慢慢形成了前后端的分离,客户端需要完成的事情越来越多,代码量也是与日俱增。为了应对代码量的剧增,我们通常会将代码组织在多个js文件中,进行维护。但是这种维护方式,依然不能避免一些灾难性的问题。比如全局变量同名问题,看下面的例子:
原来的文章链接地址会出现一大串字符编码,不好看,而给文章生成永久链接有利于SEO,给更加美观
本文是 基于Vite+AntDesignVue打造业务组件库[2] 专栏第 7 篇文章【在发布组件库之前,你需要先掌握构建和发布函数库】,聊聊怎么构建和发布一个函数库。
gulpjs是一个前端构建工具,与gruntjs相比,gulpjs无需写一大堆繁杂的配置参数,API也非常简单,学习起来很容易,而且gulpjs使用的是nodejs中stream来读取和操作数据,其速度更快。如果你还没有使用过前端构建工具,或者觉得gruntjs太难用的话,那就尝试一下gulp吧。
很久没有写博客了。 记得最近的实习生活都颇有收获,一直想着记下什么,当真正想写的时候,才发现什么都不记得了。 所有,上周刚刚有了一点小收获,赶紧得记下来。
官方文档里确实写了一些关于如何开发插件的指南。但这份指南也只有 60 分刚及格的水平,它确实向你介绍了 webpack 插件的基础范例、基本概念以及一些 API,但当你读完这份简短的文档后想自己真的去开发一个插件时,你会发现文档里讲的东西真的远远不够。
ES6,或许应该叫 ES2015(2015 年 6 月正式发布),对于大多数前端同学都不陌生。
本文作者:IMWeb 林鑫 原文出处:IMWeb社区 未经同意,禁止转载 本文主要展示的是gulp常用插件的使用方法和用途,通过对插件的熟练运用达到精通gulp。不定期更新。可以到gith
由于本文重点是介绍gulp4.0搭建脚手架的思路,相关插件的用法以及项目结构的设计,由于gulp的基本用法很简单,如果不熟悉可以移步官网自行研究学习。该脚手架的设计思路和功能如下:
描述:给静态资源文件名添加hash值:unicorn.css => unicorn-d41d8cd98f.css
对 NexT 主题来说,是支持 MathJax 的,但是感觉不够清真: 动态加载,渲染还要时间; 有个右键菜单,感觉没必要。 本文尝试利用 gulp 和 gulp-mathjax-page 将公式直接
在现在的前端开发中,前后端分离、模块化开发、版本控制、文件合并与压缩、mock数据等等一些原本后端的思想开始逐渐渗透到“大前端”的开发中。前端开发过程越来越繁琐,当今越来越多的网站已经从网页模式进化到了 Webapp 模式。它们运行在现代的高级浏览器里,使用 HTML5、 CSS3、 ES6 等更新的技术来开发丰富的功能,网页已经不仅仅是完成浏览的基本需求,并且Webapp通常是一个单页面应用(SPA),每一个视图通过异步的方式加载,这导致页面初始化和使用过程中会加载越来越多的 JavaScript 代码,这给前端开发的流程和资源组织带来了巨大的挑战。
Gulp 是基于 NodeJS 的前端自动化构建工具,在项目开发过程中自动化地完成 html / css / js / image / sass / less 等文件的编译、合并、压缩、语法检查、浏览器自动刷新等重复性任务,在操作上使用了 NodeJS 中的 stream (流),通过 pipe() 方法导入到指定的地方,将前一级的输出,作为后一级的输入,不再需要进行频繁的 IO 操作,但需要注意的是,这里的流内容,并非原始的文件流,而是一个虚拟的文件对象流 (Vinyl Files),存储着原始文件的路径、文件名、内容等信息
而gulp呢,是基于stream流的形式,也就是前一个函数(工厂)制造出结果,提供后者使用。
一、运行环境 1. Node.js 2. Chrome 3. 其它浏览器 二、开发工具 1. WebStorm 1.1 功能特性 1.2 小技巧 1.3 实用快捷键 1.4 插件支持 2. Sublime Text 2.1 功能特性 2.2 小技巧 2.3 实用快捷键 2.4 插件支持 3. HBuilder 3.1 功能特性 3.2 小技巧 3.3 实用快捷键 3.4 插件支持 4. 开发工具小结 三、构建工具 1. Grunt 1.1 Grunt安装 1.2 Grunt配置文件 1.3 Gru
但是压缩js会破快AngularJS文件所需的依赖注入,以至于无法工作,因此压缩前你需要将代码手动修改为下面的形式:
为了方便操作,linux虚拟机会通过windows下连接网络驱动器的方式共享自己的文件,对于前端来说,我想把gulp放在windows磁盘,操作虚拟机中的php文件,一来节省虚拟机磁盘大小,二来解决虚拟机中用svn update和commit速度过慢问题。
前言 虽然现在单页面很流行,但是在 PC 端多页面还是常态,所以构建静态页面的工具还有用武之地。最近也看到了一些询问如何 include HTML 文件的问题。 很多时候我们在写静态页面的时候也希望能和后台模板一样,将导航、页头、页脚等公用的部分分离出去,然后引入页面中。单纯的静态页面不具备这种功能,而使用 gulp 插件可以很容易的完成,比如 gulp-file-include 插件。 官网对于插件的基本使用已经说得很详细,但是对于一些具体的场景并没有举例,所以初次接触还是还是会有疑惑,比如具有选中状态的
但是升级后的 gulp 语法有改动,所以需要修改 gulpfile.js文件,否则会报
webpack 编译过程都是围绕着这些关键对象展开的,更详细完整的信息,可以参考 Webpack 知识图谱 。
领取专属 10元无门槛券
手把手带您无忧上云