前言 在刚入门前端的时候,我们并不清楚前端有工具可以帮我们自动化打包压缩文件,当时只关注能实现功能就可以了,也不太在意前端性能优化的问题,随着项目功能的复杂,项目也变得越来越大,页面的执行速度也开始变慢,因此我们认识到了前端优化的重要性,但是之前的压缩打包都是需要我们自己手动执行或者去直接转化的网站进行转化,这无疑增加了我们的工作量,作为程序员,我觉得更重要的是让程序去执行我们想执行的东西,于是我便google了起来,查到了grunt和gulp,两者都是自动化打包,但是grunt的一大堆繁杂的配…

在对Gulp有了一个初步的了解之后,我们开始构建一个较为完整的Gulp开发环境. 本文主要分为6个段落: 1. 构建项目目录结构(Directory Structure Build) 2. 插件介绍及使用方法(Tasks and dependencies) 3. 扩展优化(Extend & Optimize Task) 4. 其他插件介绍(Other plug-ins) 5. 匹配规则(Match Files) 6. 注意事项(Attention) 关于Gulp的入门介绍及安装方法,可先去 <…

类似于Grunt,gulp是另一个同样功能很强大的前端项目自动化利器. 下面是项目的效果:…

前言 ​ 最近几年前端技术发展日新月异,特别是单页应用的普及.组件化.工程化.自动化成了前端发展的趋势.webpack已经成为了前端打包构建的主流,但是一些老古董的项目还是存在的,也有优化的必要,正好公司的老项目需要优化,不多说拿gulp实践一下. 本文需要安装node(自行安装),并了解过gulp入门.gulp脚本下载:https://github.com/youhunwl/gulp 欢迎star. 实践 创建项目目录 首先初始化npm依赖项与基本信息,使用命令npm init一直回车,生成p…

1,使用 gulp.watch 来监听文件自动打包 在上篇文章中,介绍了如何利用webpack来为项目做打包编译等工作,其中介绍到在我们开发的时候,经常改动js,因为我们文件是引用编译后的js文件,若想让程序正常运行,必须 webpack 一次.这样会大大降低我们的工作效率. 网上找到说在 webpack.config.js 中添加 watch : true ,运行 webpack -w 即可? 然而,我发现并没有什么卵用??在此若有各位朋友知道怎么做的,在下面留言,谢谢. 既然,不能用,但是我…

摘要: Gulp 是一个自动化工具,前端开发者可以使用它来处理常见任务: 搭建web服务器 文件保存时自动重载浏览器 使用预处理器如Sass.LESS 优化资源,比如压缩CSS.JavaScript.压缩图片 当然Gulp能做的远不止这些.如果你够疯狂,你甚至可以使用它搭建一个静态页面生成器.Gulp真的足够强大,但你必须学会驾驭它. 这是这篇文章的主要目的.帮助你了解Gulp的基础用法,助你早日完成一统天下的大业. 在我们深入了解之前,我们先来说说为什么是Gulp. 为什么是Gulp? 类似G…

一,基础篇 先安装nodejs 使用淘宝镜像安装tnpm 安装 cnpm 插件:npm install -g cnpm --registry=https://registry.npm.taobao.org 然后就可以用 cnpm命令从淘宝镜像获取插件包了:当然,你这时候依旧可以用npm命令从官方服务获取插件包. cnpm支持除 publish 之外的原生 npm 所有命令. 1,新建文件夹 gulp 2,切换到gulp目录下,执行 cnpm init,填写相关信息,生成package.json文…

就前端的发展而言会越来越朝着后端的标准化靠近,后端的工程化以及模块化都很成熟.基于这样一个思路,开始探索如何优化目前的开发流程.而使用的工具就是gulp. 个人觉得gulp比较webpack更为简单实用,gulp依靠插件工作,webpack除了插件还有各种loader.当然这不是重点,重点是能够确实解决问题.目前公司对前端开发并没有一个明确的要求,所以个人根据现有的开发流程以及开发认识,写了如下的代码. 目录结构,src内部的相关文件和代码,最终编译到dist中,dist就是发布的代码 然后是p…

关于gulp的使用,已经在之前写过一篇文章,但是遗留了一个问题.问题是实现文件的增量式更新,就是给html引入的js和css文件打上标记.每次更新标记更新. 上篇文章想通过开发同时实现标记的实时更新,后来借鉴了别人的实现,原来的确是应该将这个过程分为开发和生产两个环境的,于是茅塞顿开.于是有了本文. 代码 package.js文件 { "name": "gulpf", "version": "1.0.0", "des…

前言 随着前端诸如webpack,rollup,vite的发展,gulp感觉似乎好像被取代了.其实并没有,只不过它从台前退居到了幕后.我们仍然可以在很多项目中看到它的身影,比如elementplus.vant等.现在gulp更多的是做流程化的控制. 比如我们要把一个大象放进冰箱里就需要 打开冰箱门->把大象放进冰箱->关上冰箱门,这就是一个简单的流程,使用gulp就可以规定这些流程,将这个流程自动化,并自动执行这个流程. 所以我们可以使用它在项目开发过程中自动执行常见任务.比如打包一个组件库,…

什么是gulp?   基于node的自动化构建工具   扩展:开发的时候分为2个节点一个是开发阶段  另一个是部署阶段        开发阶段:源文件不会被压缩            部署阶段:所有文件需要压缩 .gulp能干什么? 1  自动压缩JS文件 2  自动压缩CSS文件 3  自动合并文件 4  自动编译sass 5  自动压缩图片 6  自动刷新浏览器 ........... .怎么安装gulp?   因为它基于nodeJS,因此需要先安装node环境   安装完成后,打开你的命令…

1.gulp环境的安装 首先确保你已经正确安装了nodejs环境.然后以全局方式安装gulp: npm install -g gulp 2.建立文件夹 mkdir item 3.初始化项目: npm init 这时候查看一下item文件件多了一个package.json.这是gulp的配置文件. 里面的内容就是我们刚才填写的信息. 4.继续命令行,安装gulp包,并且在配置文件中 --save-dev表示在package.json添加配置 npm install gulp --save-dev…

废话不多说.直奔主题. 1.安装node. 别问为什么.如果你不知道,说了你还是不知道. 别问怎么安装,自己去百度. 2.安装grunt_CLI. 安装完node,并且安装成功了,后.下载grunt_Cli. 看到如上界面,说明安装成功了. 查看grunt版本. 3.在F盘新建grunt目录 目录里面新建如下文件,和文件夹. npm init 命令行新建package.json 内容如下: 4.安装grunt. 安装完成后看一下package.json的devDependencies多了一条配置…

一.安装node nodejs下载地址:https://nodejs.org/ nodejs自带npm模块管理器,安装完成之后打开dos命令窗口输入 node -v就能查看nodejs是否安装成成功 由于npm安装module太慢,建议使用淘宝镜像:npm install cnpm -g --registry=https://registry.npm.taobao.org 安装完成,查看cnpm -v 二.安装gulp 1,gulp安装分为全局安装和局部安装 首先进行全局安装:npm insta…

一.grunt是基于nodejs的,所以首先我们需要安装node 二.全局安装grunt 可以参考 http://www.gruntjs.net/docs/getting-started/ 进行安装. 1.全局安装 npm install -g grunt-cli 2.进入当前项目根据配置文件 package.json 进行本地安装,或者直接把以前项目所有用过的本地安装文件直接复制到当前项目使用 3.任务设置 打开gruntfile.js进行设置 module.exports = functio…

一.Node环境 1.什么是Node? Node.js类似于jquery.js,不是js文件,也不是一个js框架,而是Server side JavaScript runTime,服务端的一个JS运行时:Node中只能运行ECMScript,无法使用BOM和DOM:目前我们的JS是运行在浏览器内核中的:说到底就是一个JS运行环境. 2.Node的历史 Node.js 0.12.7版本,也就是官方版本,但是另一个分支是IO.js,他是社区的产物,不是官方的东西,io.js有很多新特性,迭代速度非常…

1.NVM简介 我们可能同时在进行2个项目,而2个不同的项目所使用的node版本又是不一样的,或者是要用更新的node版本进行试验和学习.这种情况下,对于维护多个版本的node将会是一件非常麻烦的事情,而nvm就是为解决这个问题而产生的,他可以方便的在同一台设备上进行多个node版本之间切换,而这个正是nvm的价值所在. 2.NVM下载 如果已经安装了node,建议卸载,然后继续向下看.两种下载方式: ① 直接进入安装包下载地址:https://github.com/coreybutler/nv…

1.gulp介绍 基于流的前端自动化构建工具,利用gulp可以提高前端开发效率,特别是在前后端分离的项目中.使用gulp能完成以下任务: 压缩html.css和js 编译less或sass等 压缩图片 启动本地静态服务器 其他 2.gulp构建 前端构建流程: 开发->分析->测试->编译->发布部署 一段简单的基于gulp的项目构建代码,gulpfile.js内容如下所示: gulp.task('default',function(){ return gulp .src(&quo…

Gulp是什么? Gulp是前端自动化的工具,但Gulp能用来做什么 1.搭建web服务器 2.使用预处理器Sass,Less 3.压缩优化,可以压缩JS CSS Html 图片 4.自动将更新变化的代码实时显示在浏览器 5.前端测试 ...... 这些都不是他的全部功能,社区丰富的插件,为他提供了强大的后盾. 首先下载gulp(前提默认你安装好了node,先 npm install,创建一个package.json) npm install gulp -g //全局安装 npm install…

前端构建工具的作用可以认为是对源项目文件或资源进行文件级处理,将文件或资源处理成需要的最佳输出结构和形式. 在处理过程中,我们可以对文件进行模块化引入.依赖分析.资源合并.压缩优化.文件嵌入.路径替换.生成资源包等多种操作,这样就能完成很多原本需要手动完成的事情,极大地提高开发效率. 一.Gulp Gulp 是一个基于流的自动化构建工具.除了可以管理任务和执行任务,还支持监听文件.读写文件.Gulp 被设计的非常简单,只通过下面5个方法就可以支持几乎所有构建场景: 通过 gulp.task 注册…

通过前面几节的准备工作,对于 npm / node / gulp 应该已经有了基本的认识,本节主要介绍如何构建一个基本的前端自动化开发环境. 下面将逐步构建一个可以自动编译 sass 文件.压缩 javascript 文件.多终端多浏览器同步测试的开发环境,并且还可以通过 piblish 命令对项目下的文件进行打包操作. 相关连接导航 在windows下安装gulp —— 基于 Gulp 的前端集成解决方案(一) 执行 $Gulp 时发生了什么 —— 基于 Gulp 的前端集成解决方案(二) 常…

前端自动化构建工具gulp的使用总结 博主最近偶的空闲,在此对gulp的使用做一个总结,让小伙伴知道如何合理的使用gulp以及gulp的使用技巧. 谈到gulp,有人可能就会想到另外一个构建工具grunt,那么 博主就要夸你一句:油啊热瘪死他. 那么grunt和gulp有什么异同点呢? 1.易于使用:采用代码优于配置策略,Gulp让简单的事情继续简单,复杂的任务变得可管理. 2.高效:通过利用Node.js强大的流,不需要往磁盘写中间文件,可以更快地完成构建. 3.高质量:Gulp严格的插件指导…

gulp是基于流的前端自动化构建工具. 一.环境配置 gulp是基于nodejs的,所以没有 nodejs 环境的要先去安装好 然后给系统配上gulp环境 npm install -g gulp 再到某一工程目录下 跟grunt一般,也是需要package.json包依赖文件和一个入口文件 gulpfile.js(其他名字识别不了) 然后就类似的先装上gulp npm install gulp --save-dev 最基本的使用方式是这样:(使用jshint插件校验js代码) var jshin…

现在我们通过这3个问题来学习一下: 1.什么是gulp? 2.为什么要用gulp? 3.怎么用?   什么是gulp 答:是一个前端自动化的构建工具,直白点说,如果没有这个工具,我们利用人工依旧可以做到以下优点,但是在项目逐渐庞大的时候,采用这个工具,可以提升性能和效率.   为什么要用gulp? 答: 1.js和css属于静态文件,很多时候浏览器存在缓存机制,为了避免缓存带来的误会,可以利用构建工具,给每一个静态文件添加一个版本号,这样浏览器就会认为是新的文件,就不存在缓存机制. 2.性能优化…

一个月没写博客了,今天有时间,就写个gulp的入门使用吧.. 简介:gulp是一个前端自动化构建工具,可以实现代码的检查.压缩.合并……等等,gulp是基于Node.js的自动任务运行器 一.安装Node 去Node官网下载安装,由于5.0版本的改变比较大,下载4.2.2稳定版即可 以下操作都是在命令行环境中执行: node -v //可查看安装Node的版本号,有即为安装成功 二.通过npm安装Gulp npm(node package manager)nodejs的包管理器,用于node插件…

很久没有更新博文了. 经过了一次年前吐血的赶项目,终于在年后回血了.趁着有空,新学到了一个前端自动化构建工具-gulp. 现在我们通过这3个问题来学习一下: 1.什么是gulp? 2.为什么要用gulp? 3.怎么用?   什么是gulp 答:是一个前端自动化的构建工具,直白点说,如果没有这个工具,我们利用人工依旧可以做到以下优点,但是在项目逐渐庞大的时候,采用这个工具,可以提升性能和效率.   为什么要用gulp? 答: 1.js和css属于静态文件,很多时候浏览器存在缓存机制,为了避免缓存带…

使用Gulp实现前端构建自动化 安装 一.安装NodeJs Gulp的安装依赖于NodeJs的npm安装管理器 安装包下载地址 关于npm命令: 1. npm install <name> 会把插件安装到node_modules目录中 2. 参数 --save 会在package.json的dependencies属性下添加该插件 3. 参数 --save-dev: 会在package.json的devDependencies属性下添加添加该插件 4. 参数 -g 全局安装插件 4. npm…

前言 前端自动化构建工具从最开始的grunt, gulp, fis等到现在比较流行的webpack可谓层出不穷,个人还是比较倾向于gulp,虽然有的时候会因为某个插件的配置问题头疼很久,但不可否认gulp真的很灵活,而且个人觉得它和node结合起来比较舒服,再有对项目目录结构的要求比较低,即使再老再乱的项目也可以通过它进行整理和自动化构建.这里用本公司的一个老项目举例子. 项目目录 因为是老项目,各种资源的引用乱七八糟,首先花费大量时间把项目中所有静态资源全部整理至新的目录中,并且把原来项目中的…

目录 1. gulp使用步骤 1.1 安装Node.js 1.2 全局安装gulp 1.3 安装项目依赖包gulp 1.3.1 了解package.json 1.3.2 根据package.json安装gulp依赖 1.3.3 npm安装gulp依赖 1.3.3 创建gulpfile.js 1.3.4 运行任务 2. gulp API 2.1 gulp.task( name[, deps], fn ) 2.2 gulp.watch( glob[, opts], tasks ) 2.3 gulp.…

gulp是前端工程化的工具,它可以对html,css,js等代码和图片进行压缩,也可以对sass和less等预处理语言进行编译,代码部署.gulp学起来简单,用起来方便,大大提高我们工作效率. 这里可以参考CTOLib码库的gulp基本教程 ||<gulp中文网> 安装node.js 因为gulp是基于node.js的,所以先要安装一下node.js.在网页中打开node官网安装就可以:https://nodejs.org/en/ 使用命令行 小编习惯用git的命令工具,当然我们可以使用Win…