gulp 是一个前端构建工具，它能通过自动执行常见任务，比如编译预处理 CSS ，压缩 JavaScript 和刷新浏览器，来改进网站开发的过程，从而使开发更加快速高效。
gulpjs是一个前端构建工具，与gruntjs相比，gulpjs无需写一大堆繁杂的配置参数，API也非常简单，学习起来很容易，而且gulpjs使用的是nodejs中stream来读取和操作数据，其速度更快。如果你还没有使用过前端构建工具，或者觉得gruntjs太难用的话，那就尝试一下gulp吧。
在该项目路径下，我们独立安装gulp：npm install gulp 。此时会生成一个 node_modules 文件夹和一个 package-lock.json 文件，如下图：
1、 如何全局安装一个 node 应用? npm install -g <package_name> 上述命令执行之后将会在当前的目录下创建一个 node_modules 的目录（如果不存在的话），然
什么是 gulp 简单的讲，gulp 是一个构建工具，一个基于流的构建工具，一个 nodejs 写的构建工具，使用 gulp 的目的就是为了自动化构建，提高程序员工作效率😂。 入门指南 全局安装 gulp： $ npm install --global gulp 作为项目的开发依赖（devDependencies）安装： $ npm install --save-dev gulp 在项目根目录下创建一个名为 gulpfile.js 的文件： var gulp = require('gulp'); // 默认
版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/j_bleach/article/details/53053500
laravel中的前端代码都是形如xxx.blade.php。可以使用前端的工具来对blade,css,js进行压缩吗？当然，gulp可以做到。 gulp是什么？ 看完你就明白，这是个自动化构建工具的核心就是gulpfile.js。 用于laravel的gulp怎么写？ 把一切*.html换成*.blade.php就行了。 有什么坑要注意？ 异步执行，前后依赖关系必须写明。比如： gulp.task('rev' , ['concatCss', 'concatJs'],function() { return
jsdelivr是一个免费的CDN服务，可以利用它配合github来为页面静态资源提供加速，有效提升资源加载速度。
前言 gulp 是一个前端项目开发的自动化打包构建工具, 类似的打包工具还有webpack。 前端开发的过程中，会写到 js 文件，css 文件，我们的项目如果想上线，那么一定要体积小一点，就需要对原始的代码进行编译压缩。 环境准备 gulp 是基于node 运行的，使用npm 全局安装 npm install -g gulp 安装gulp依赖包,因为在上线后是不需要这个包的，所以将这个项目安装在开发依赖： npm install gulp --save-dev 安装完成会生成一个package-lock.
gulp 是一个构建工具，基于Node.js的平台运行，使用的是commonJs的模块化语法。 我们使用gulp需要用到的包 一个TASK任务，对应一个包，对应一个处理逻辑、 gulp.series对应的是同步任务，从左到右，依次执行任务。时间长 gulp.parallel对应的是异步任务，效率高，时间短。 gulp.src 表明文件从哪里读取 gulp.dest 表明文件输出到哪 const gulp = require('gulp'); //gulp的包 const eslint = req
本文需要安装node（自行安装），并了解过gulp入门。gulp脚本下载：https://github.com/youhunwl/gulp 欢迎star。
在小程序之初便开发应用了，现在小程序的开发也越来越成熟了，完善了很多的API、组件、架构等，社区也由原来的零星点点到现在的不大不小，但也算是有了，期间也诞生了很多的开发框架，越来越多的三方辅助库，我也捣鼓出很多。比较有名的算是 wepy 和 labrador ， wepy是 vue 风格的小程序开发框架， labrador 则比较亲和 React ，各有千秋，也各有深坑，而labrador 作者目前已经停止更新了 TnT，作为React深度使用者的我来说是忧伤的，于是我捣鼓出 wn-cli 来用类 React 快速开发微信小程序，然而在这个过程中，想了很多，为什么需要开发框架呢？小程序本身在一开始就强调框架，且现在做的也不差，后来总结了下，无非是不熟悉小程序这套框架，但学习新的中间框架去开发小程序，这不是更加加大了熟悉成本吗？且出了问题增加了处理的代价。
webpack简介 Webpack 是一个模块打包器。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。 webpack特点 Webpack 有两种组织模块
webpack简介 Webpack 是一个模块打包器。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。 webpack特点 Webpack 有两种组织模块依赖的方
11、前端技术体系 （1）多版本/覆盖 时间戳 发布新版本回滚 （2）ssr & 同构 （3）webpack vendor：commonchunk external:全局变量 默认css处理
在前面两节提到的任务再 gulp 执行得到了相应的产物，但是当文件修改过后我们依然需要再次执行命令来进行构建，但是在开发过程中，gulp 同样支持我们通过 watch 来对文件进行监控，每当监控到文件变动就触发所关联的构建任务。这样的特性在编程开发中也是最为基础的功能支撑。
这里建议先复习一下《再唠叨JS模块化加载之CommonJS、AMD、CMD、ES6》
而gulp呢，是基于stream流的形式，也就是前一个函数（工厂）制造出结果，提供后者使用。
最近在学习react js，ReactJS是Facebook开发的用于构建用户界面的JAVASCRIPT库，利用其可以实现组件式开发。
我们要通过一个实际案例，去实现一个自动化的网页构建的自动化工作流 构建用demo：gitee.com/liuyinghao1…
使用缘由 前端工程师需要维护的代码变得极为庞大和复杂，代码维护、打包、发布等流程也变得极为繁琐，同时浪费的时间和精力也越来越多，当然人为的错误也随着流程的增加而增加了更多的出错率 简介：grunt是一套前端自动化工具，一个基于nodeJs的命令行工具，一般用于：压缩文件，合并文件，简单语法检查 为什么要使用Grunt？ Grunt生态系统非常庞大，并且一直在增长。由于拥有数量庞大的插件可供选择，因此，你可以利用Grunt自动完成任何事，并且花费最少的代价。如果找不到你所需要的插件，还可以自己动手创造一个
问题引入：今天在 Gulp 构建任务中出现一个 html 解析错误，但是并没有报错，也没有中断 gulp 构建任务的执行，而是出现 UnhandledPromiseRejectionWarning 的警告，所以会误以为构建成功，这篇文章将对此进行探究并解决该问题。
Promise和co都搞过了，终于还是忍不住要折腾，上ES7的终极方案：async/await。
node有npm，npm能运行脚本。在package.json文件中，scripts 属性可以指定npm 的命令：
在现在的前端开发中，前后端分离、模块化开发、版本控制、文件合并与压缩、mock数据等等一些原本后端的思想开始逐渐渗透到“大前端”的开发中。前端开发过程越来越繁琐，当今越来越多的网站已经从网页模式进化到了 Webapp 模式。它们运行在现代的高级浏览器里，使用 HTML5、 CSS3、 ES6 等更新的技术来开发丰富的功能，网页已经不仅仅是完成浏览的基本需求，并且Webapp通常是一个单页面应用(SPA)，每一个视图通过异步的方式加载，这导致页面初始化和使用过程中会加载越来越多的 JavaScript 代码，这给前端开发的流程和资源组织带来了巨大的挑战。
关于作者： 蓝邦珏，腾讯前端工程师，15年加入腾讯SNG增值产品部，期间主要负责过手Q阅读、手Q动漫项目的业务开发。业余喜欢折腾前端新技术和写文章。 上期文章： gulp源码解析（一）—— Stream详解 gulp 之所以在性能上好于 grunt，主要是因为有了 Stream 助力来做数据的传输和处理。那么我们不难猜想出，在 gulp 的任务中，gulp.src 接口将匹配到的文件转化为可读（或 Duplex/Transform）流，通过 .pipe 流经各插件进行处理，最终推送给 gulp.dest
Dear，大家好，我是“前端小鑫同学”，😇长期从事前端开发，安卓开发，热衷技术，在编程路上越走越远～ 写作背景： 现在其实做的不错的开源 UI 库有很多，我还没有真正的实践过多造一个轮子也没太大必要，但是学习编写的思路和过程还是很有必要的，正好看到慕课的一个视频就顺便总结一下组件库开发的流程，顺便熟悉一个打包的配置和流程。 搭建基础结构： 使用VueCli创建默认模板： 创建名为it200-ui的项目：vue create it200-ui； 使用默认Vue2模板即可，我们只考虑搭建UI库的思路不考虑
①. 图片大小优化，部分图片使用WebP（需要考虑webp兼容性） 在线生成，如智图、又拍云 gulp生成，gulp-webp或gulp-imageisux canvas生成
babel 6与之前版本的区别： 之前版本只要安装一个babel就可以用了，所以之前的版本包含了一大堆的东西，这也导致了下载一堆不必要的东西。但在babel6中，将babel拆分成两个包： babel-cli和babel-core。如果你想要在CLI(终端或REPL)使用babel就下载babel-cli，如果想要在node中使用就下载babel-core。 babel 6已结尽可能的模块化了，如果还用babel 6之前的方法转换ES6，它会原样输出，并不会转化，因为需要安装插件。
第一次接触gulp，当参考各方资料翻译下来，感觉还不如自己总结一份来的流畅，所以这篇最后将自己的实践放在开始，将之前的原文与译文放在最后以供参考。
其实之前都不打包的，就是 js、css 分别用对应的工具编译下，然后在 html 里引入。
pop() 删除最后一个；push最后添加一个或者多个；reverse颠倒数组；shift删除第一个元素；unshift首部添加元素；concat衔接两个数组；join把数组按照指定字符变为字符；slice(1,1)截选数组元素；
CSS3的标准并没有全部定稿，目前CSS3的标准分成了不同的模块，具体的标准由各个模块推动标准和定稿，标准制定的过程中，浏览器也在不断的发新的版本来兼容新的标准。 浏览器有时会给一些在试验阶段或非标准阶段的css属性添加前缀, 这样开发者就可以使用 浏览器行为的改变不会破坏标准. 开发人员应等待包含无前缀属性，直到浏览器行为标准化。 1. 主流浏览器引擎前缀 -webkit- (谷歌, Safari, 新版Opera浏览器等) -moz- (火狐浏览器) -o- (旧版Opera浏览器等) -ms- (IE
opn模块通常是作为跨平台的打开文件或者网站的模块，在web应用中最常见的使用是比如项目开发或者启动的时候打开浏览器进行访问。
回首自己3年多的cocos2d游戏开发经历，从cocos2d到coco2d-x入门，之后机缘巧合辗转到了cocos2d-js阵营。在深入使用cocos2d-js以及后来使用cocoscreator做游戏项目的同时，我开始逐步走进Javascript神奇的世界。现在回过头来忽然察觉到，不是自己选择了cocos H5(我将cocos2d-js/cocoscreator的统称)，而是选择了javascript；不只是简单地选择了这门脚本语言，而选择的是javascript平台和生态圈，这才是自己为什么一直对cocos H5不离不弃的原因。
概述 WeUI是一套同微信原生视觉体验一致的基础样式库，为微信Web开发量身设计，可以令用户的使用感知更加统一。包含button、cell、dialog、toast、article、icon等各式元素。 这有什么好处呢？其实从上面也可以看到官方的话，就是让你的应用跟微信官方版本更加统一，而没有违和感。当然，更重要的是，这样的库在某些时候可以提供你的开发效率哦。github地址：https://github.com/weui/weui 使用 方法一： 使用bower进行安装 bower insta
这两天，在对现有项目进行框架优化，由于项目使用gulp+jQuery构建的，不支持ES6规范，不能很好满足越来越复杂的需求场景，尤其是需要多异步任务的情况下，js又要异步又要操作各种DOM状态，状态与状态间也是各种紧耦合，单纯使用es5和jQuery，已经开始影响开发效率了。
随着前端技术的发展，前端工程化变得越来越重要。前端工程化部分的面试题主要考察应试者对工程化的理解与运用，如何通过工程化来提高代码质量、编译代码、优化代码；如何提高网站性能，保障网站安全，提升用户体验；如何将开发的代码按照理想的方式发布和上线等。
友情提示：推荐阅读时间10分钟 + 练习时间10分钟 上一期给大家分享了Gulp插件的安装与使用，只要掌握了Gulp插件安装的流程与配置，对于其他Gulp插件的使用基本上就没有太大的问题。毕竟Gulp的插件太丰富了，大家也没有太多的精力把所有的插件都去研究一遍。当一个网站进行改版升级的时候，会遇到静态资源版本更新的问题，那么对于前端开发工程师来说，该如何解决这个问题？所以今天要和大家一起探讨如何解决静态资源版本更新的问题和package.json的作用。 相关阅读：前端工程化 | 定制专属提速“外挂”（上）
在现在的前端开发中，前后分离、模块化、版本控制、文件合并与压缩、mock数据等，是在大前端开发避不开的概念。在开发的时候，以组件的方式分别开发，在部署的时候又将这些代码、图片、样式等资源优雅地合并成模块并以增量、热更新的方式加载到浏览器中，这样的模块化方案一直是前端架构师在解决和优化的焦点之一。
前言: gulp是前端开发过程中对代码进行构建的工具，是自动化项目的构建利器；她不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成；使用她，我们不仅可以很愉快的编写代码，而且大大提高我们的工作效率。相比于grunt的频繁 IO 操作，gulp的流操作，能更快地更便捷地完成构建工作。此处仅记录初步折腾中所遇点滴以及待解决的点。 Gulp折腾之初探 折腾之战略上的藐视 回过头看Gulp的折腾历程，使用还是非常简易的。初步入门资料可参考这里。所以战略上一定要藐视”她”;当然战术上要
ES6，或许应该叫 ES2015（2015 年 6 月正式发布），对于大多数前端同学都不陌生。
Grunt和Gulp是Javascript世界里的用来做自动压缩、Typescript编译、代码质量lint工具、css预处理器的构建工具，它帮助开发者处理客户端开发中的一些烦操重复性的工作。Grunt和Gulp都在Visual studio 2015中得到支持。ASP.NET 项目模板默认使用Gulp。 Grunt和Gulp Grunt和Gulp有什么区别？Gulp虽然是稍微晚一点登场的，但是它因crisp performance和优雅的语法受到欢迎。与Grunt不同，Grunt往往在硬盘上是读写文件，G
前端基本内容概述 HTML HTML(超文本标记语言)是一种用于创建网页的标准标记语言. CSS CSS(层叠样式表)是一种用来为结构化文档添加样式的计算机语言. JavaScript JS(JavaScript): 一种高级的，解释执行的编程语言. 解释型语言: 将代码一句一句直接运行, 不需要像编译语言经过编译器先行编译为机器码之后再运行 ES6 ES6(ECMAScript6)是新版本JavaScript语言的标准. AJAX AJAX: 用 JavaScript 执行异步网络请求. AJAX的优点:
小编说：历史上先后出现了一系列构建工具，它们各有优缺点。由于前端工程师很熟悉JavaScript，Node.js又可以胜任所有构建需求，所以大多数构建工具都是用Node.js开发的。本文就来一一介绍它们。 前端技术发展之快，各种可以提高开发效率的新思想和框架层出不穷。但是它们都有一个共同点：源代码无法直接运行，必须通过转换后才可以正常运行。 构建就是做这件事情，将源代码转换成可执行的JavaScript、CSS、HTML代码，包括如下内容。 代码转换：将TypeScript编译成JavaScript、将SC
一、HTML、CSS基础、JavaScript语法基础。 二、JavaScript语法进阶。包括：作用域和闭包、this和对象原型等。 三、ES6语法。这部分属于JS新增的语法， promise、async 等内容要尤其关注。 四、HTML5和CSS3。要熟悉其中的新特性。 五、canvas。加分项。 六、移动Web开发、Bootstrap等。要注意移动开发中的适配和兼容性问题。 七、前端框架：Vue.js和React。这两个框架至少要会一个。入门时，建议先学Vue.js，上手相对容易。但无论如何，同时掌握 Vue 和 React 才是合格的前端同学。 八、Node.js。属于加分项。 九、自动化工具：构建工具 Webpack、构建工具 gulp、CSS 预处理器 Sass 等。注意，Sass 比 Less 用得多，gulp 比 grunt 用得多。 十、前端综合：HTTP协议、跨域通信、安全问题（CSRF、XSS）、浏览器渲染机制、异步和单线程、页面性能优化、防抖动（Debouncing）和节流阀（Throtting）、lazyload、前端错误监控、虚拟DOM等。 十一、编辑器相关。Sublime Text 是每个学前端的人都要用到的编辑器。另外，前端常见的IDE有两个：WebStorm 和 Visual Studio Code。WebStorm 什么都好，可就是太卡顿；VS Code就相对轻量很多。 十二、TypeScript（简称TS）。ES 是 JS 的标准，TS 是 JS 的超集。TS属于进阶内容，建议把上面的基础掌握之后，再学TS。
近几年，移动端站点和app、手游井喷式的发展，大大出乎了当初从业者的预料，2010年前后中国还处于3G网时代，各种3G宣传铺天盖地，如果你稍稍回忆一下，那个时候中国几乎没有像样的移动站点；大约在12年左右，也就是iphone4s诞生的时代，在中国高级智能设备开始被普遍使用，4G的覆盖范围也越来越大，各种app、移动站点、Html5活动页面也逐渐火爆起来；随着行业的发展，对从业者及技术支持的要求也越来越高；对于前端，前端资源和页面优化是常见要求，对比移动端，移动端对前端优化的要求更高，可以说要达到极致，虽然现
领取专属 10元无门槛券
手把手带您无忧上云
