更多gulp常用插件使用请访问:gulp常用插件汇总 gulp-sourcemaps这是一款用来生成映射文件的一个插件,SourceMap 文件记录了一个存储源代码与编译代码对应位置映射的信息文件.我们在调试时都是没办法像调试源码般轻松,这就需要 SourceMap 帮助我们在控制台中转换成源码,从而进行 debug. gulp-sourcemaps在前端的工作中主要是用来解决以下三个方面出现的 debug 问题: 代码压缩混淆后 利用 sass .typeScript 等其他语言编译成 css

1.gulp是什么?    Gulp是基于node的一个自动化构建工具,开发者可以使用它构建自动化工作流程(前端集成开发环境).例如:网页自动刷新,CSS预处理,代码检测,图片压缩等功能,只需要简单的命令行就可以全部完成.使用它,可以简化工作,让你把重点放在功能的开发上,同时减少人为失误,提高开发的效率和质量. 2.为什么使用gulp? (1)JavaScript和CSS更改后需要手动清除缓存 JavaScript和CSS属于静态文件,如果项目地址不变,浏览器会缓存这些文件,那就意味着当我们修改

在对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的入门介绍及安装方法,可先去 <

gulp 了解 首先我们了解一下什么是gulp, gulp是前端自动化构建工具,在开发过程中很多重复的任务,我们都可以正确的使用gulp来完成,gulp基于nodejs,使用gulp可以做很多事情 例如gulp转less语法,js压缩,css压缩,html压缩,下面我大体说一下这个gulp的主流程 gulp 官网 gulp插件 中文网 gulp的主流程 首先你要安装nodejs环境. 全局安装gulp,然后你每次使用gulp的项目中还要安装一下gulp以及你在项目中所用到的插件也安装好. 然后你

前言 一句话先 gulp 是一个可以简单和自动化"管理"前端文件的构建工具 先说我以前的主要工作,我主要是做游戏服务端的,用c++/python,所以我对东西的概念理解难免要套到自己做过的技术上,所以有时候有些技术说法对不上,还请看到这篇文章的人指正指正. gulp快速入门&初体验 [toc] 干嘛的 简单的说 前段构建工具 自动化 管理前端代码 gulp 的作用就是帮你处理前端文件, 什么 js 什么 html 什么css 还有json等等前端文件. 麻溜的!自动的!把本该由

webpack 是一个打包工具 webpack 是用来把你的源文件打包成一个文件的,你做了一系列配置以后,可以用一句 webpack 实现打包的功能. webpack的作用是从若干个文件开始顺藤摸瓜,根据文件之间的引用关系找到所有相关文件,把他们打包到若干打包文件里. gulp 是一个自动化工具.gulp 是用来实现自动化的,你写了一堆任务之后,可以用一句 gulp 执行你所需要的所有任务. 用于寻找不同任务之间的依赖关系,找到正确的执行顺序,基本上什么任务都可以做,包括webpack任务.比如

一.gulp的作用? 1.gulp-sass : 编译sass 2.gulp-rename : 重命名 3.gulp-cssnano : 压缩css 4.gulp-concat : 合并文件 5.gulp-uglify : 压缩js 6.gulp-babel : 将ES6转为ES5 二.如何使用gulp? 1.全局安装gulp: cnpm install -g gulp 2.在项目根目录下初始化package.json : cnpm init -y 3.在项目根目录下局部安装gulp : cnp

一.gulp使用-博客推荐: http://www.sheyilin.com/2016/02/gulp_introduce/ 二.gulp的作用 gulp是一个前端构建工具,它是一个工具框架,可以通过开发插件来扩展它的功能. gulp的工作流程是在一个配置文件中指明对某些文件进行压缩.合并.编译等功能,之后工具就会自动完成这些任务. 使用构建工具主要是为了提高开发效率,将重复性的工作利用构建工具来自动完成. 三.创建配置gulp的文件过程 1.全局安装gulp npm install gulp

刚接触node.js,对前端的一些东西还不是很清楚,据说Gulp这东西很强大,先来看看从网上抄的一段关于自动化构建的描述: 在为数众多的中小型软件作坊中,不存在自动化构建和发布工具.构建.交付准备环境.代码发布全由手工完成,同样还有运行测试.备份旧版本.新版本打标签以及许多其他重复的事情.毕竟你可能认为这全是非常简单的工作,集成开发环境通过按钮或快捷键就可构建项目,你开启两个窗口拖放少许文件或文件夹即可完成网站发布.但当你在维护代码库和应用时所有这些事情加在一起,这里几分钟,那里几分钟,最终会浪

今天在写项目的时候用到了gulp构建工具,虽然一年前就有用过,但是一直只存在于我的“有道云笔记”里,今天又一次用到,固然是巩固一下,这里来记录一下吧:这里我主要想要记录的就是初学者在第一次使用gulp该如何操作,关于gulp的概念以及相关介绍,我这里就不一一描述了,在以后的文章里我会再补过来...... 总的流程:安装nodejs -> 全局安装gulp -> 项目安装gulp以及gulp插件 -> 配置gulpfile.js -> 运行任务 第一步你需要安装nodejs:(gul

环境介绍: pro环境:生产环境,面向外部用户的环境,连接上互联网即可访问的正式环境. pre环境:灰度环境,外部用户可以访问,但是服务器配置相对低,其它和生产一样. test环境:测试环境,外部用户无法访问,专门给测试人员使用的,版本相对稳定. dev环境:开发环境,外部用户无法访问,开发人员使用,版本变动很大. 项目文件的部署 --|src (dev环境 开发环境) --| html --| css --| images --| js --| js (直接写js代码的文件) --| lib(

npm淘宝镜像:https://npm.taobao.org/ vscode先安装npm淘宝镜像 再安装gulp:https://www.cnblogs.com/xiaoleiel/p/11160569.html npm install gulp -g

更多gulp常用插件使用请访问:gulp常用插件汇总 gulp-useref这是一款可以将HTML引用的多个CSS和JS合并起来,减小依赖的文件个数,从而减少浏览器发起的请求次数.gulp-useref根据注释将HTML中需要合并压缩的区块找出来,对区块内的所有文件进行合并.注意:它只负责合并,不负责压缩!,如果需要做其他操作,可以配合gulp-if插件使用. 更多使用文档请点击访问gulp-useref工具官网. 安装 一键安装不多解释 npm install --save-dev gulp-

情况描述: 我们很容易遇到这样一种情况: 我们并不是一开始就规划好了整个项目,比如可能接手别人的项目或者工程已经手动创建好了,现在要想利用gulp来实现浏览器自动刷新,那么如何做呢? 其实非常简单,本篇文章将详细介绍实现方法和其中可能遇到的一些坑. 假设你已经使用npm全局安装了gulp,那么具体方法如下: 一.创建gulpfile.js文件 首先在项目根目录创建gulpfile.js文件,其作用在于,一旦我们在命令行输入gulp命令就可以读取gulpfile.js文件,运行其中的代码. 现在g

前言 之前学完html的基础后就去学js框架了,每次都是用脚手架搭好的文件,在无形中体验了一波前端自动化带来的方便.然后前一段时间才开始学习前端自动化. 基本介绍 gulp说得简单一点就是一个自动化把前端的各种工具以流的方式一步一步的按照设置的规定加载的一个管理工具 装载 首先全局安装gulp npm install --global gulp 然后你需要在根目录下创建一个名为gulpfile.js的文件 这个文件是gulp命令需要加载的文件,通过这个文件来处理预设的构建 使用 首先你可以在你的

gulp的作用 删除文件中冗余的内容,压缩文件,减小文件体积 实际项目中运行的都是压缩完成以后的文件 减小加载响应时间 gulp打包压缩对象 html,css,js,sass,webserver 音频,图片,插件等正常情况下都是打包完成的,直接移动到dist文件中就可以 服务器食欲gulp一起绑定执行的,执行的是打包压缩好的程序文件 gulp执行过程 所有执行步骤必须严格遵守,尤其是语法规范必须严格执行 1.下载全局gulp npm i -g gulp 2.创建项目文件 源文件src: page

ES6推出已经有几个年头了,平时也有学过一些基本语法,无奈实践经验太少.而且前端早已脱离了刀耕火种的时代,一些自动化构建工具像gulp.webpack等也需要熟练掌握.最近刚签了三方,闲暇之余就找了个ES6实战视频系统学习了一下,然而,由于视频中用到的打包工具和编译工具版本不同,导致在按照视频进行项目构建时遇到了很多坑.在此写篇文章记录一下,边学习边填坑,希望帮助到一些人吧. 项目名称:ES6 彩票项目实战 项目搭建环境:win10 任务自动化工具(gulp)后端(nodejs express框

一.起因&思路 不知不觉,已经好几天没写博客了...近来除了研究React,还做了公司官网... 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖拽效果. 首先,其实拖拽效果的思路是很简单的.主要就是三个步骤: 1.onmousedown的时候,启动可拖拽事件,记录被拖拽元素的原始坐标参数. 2.onmousemove的时候,实时记录鼠标移动的距离,结合被拖拽元素第一阶段的坐标参数,计算并设置新的坐标值. 3.onmouseup的时候,关闭可拖拽事件

gulp的pipe方法是来自nodejs stream API的,并不是gulp本身源码所定义的. 一.pipe方法的作用 pipe跟他字面意思一样只是一个管道 例如我有一堆文件 var s = gulp.src(["fileA","fileB","fileC"]) src方法实际上是'vinyl-fs'模块的方法,选择一系列文件并创建可读流(readableStream). 返回的是由从这些文件而来的流(stream) 既然是Stream,自然

code&monkey   Ext JS学习第十六天 事件机制event(一) 此文用来记录学习笔记: 休息了好几天,从今天开始继续保持更新,鞭策自己学习 今天我们来说一说什么是事件,对于事件,相信你一定不陌生, 基本事件是什么?就类似于click.keypress.focus.mouseover等这些事件都是浏览器定义好的内置事件,我们直接使用即可.对于高级事件,无非就是自己去设计一个事件,就比如我们实际项目中,通常都伴随些业务逻辑,可能是曾删改查等...这些事件都是非原生事件,也就是浏览器无

gulp是工具链.构建工具,可以配合各种插件做js压缩,css压缩,less编译 替代手工实现自动化工作 1.构建工具 2.自动化 3.提高效率用 webpack是文件打包工具,可以把项目的各种js文.css文件等打包合并成一个或多个文件,主要用于模块化方案,预编译模块的方案 1.打包工具 2.模块化识别 3.编译模块代码方案用 以上为简单的归纳,具体还可以参考一下这篇文章,讲解得很清楚 前端构建工具之争——Webpack vs Gulp 谁会被拍死在沙滩上