前端开发的工作往往需要把LESS/SASS编译成CSS文件，对多个JS、CSS文件进行合并与压缩处理，对JS、CSS进行语法的检查等，上面提到的这些都是一些重复性的操作，在开发过程中占据了大量的时间，降低了开发效率。对于大量重复性的操作是不是可以交给工具来处理，我们只需要告诉工具需要处理哪些操作。那么今天要给大家介绍的工具是Gulp。 本文内容概要： 1 什么是Gulp 2 Gulp VS Grunt 3 Gulp的安装与使用 4 命令行的简单介绍 1 什么是Gulp Gulp是一个前端自动化构建工具，在项
在项目的前端开发中，对于绝大多数的小伙伴来说，当然，也包括我，不可避免的需要在项目中使用到一些第三方的组件包。这时，团队中的小伙伴是选择直接去组件的官网上下载，还是图省事直接在网上搜索，然后从一些来源不明的地方下载，我们就无法管控了。同时，我们添加的组件间可能存在各种依赖关系，如果我们没有正确下载引用的话，到最后可能还是无法正常使用。
前不久，处理生信分析的网页版自动化报告时候就使用过 fancybox，今天在优化个人博客，为博文增加图片缩放效果，解决一些滚动条问题时，才从 fancybox 的 Github 源码中接触到 gulp —— 一个基于流的前端自动化构建工具，本文是学习的一些记录。
浏览器（软件）能够运行JavaScript代码，浏览器就是JavaScript代码的运行环境
前不久，处理生信分析网页版自动化报告的时候就使用过 fancybox，今天在优化个人博客，为博文增加图片缩放效果，解决一些滚动条问题时，才从 fancybox 的 Github 源码中接触到 gulp —— 一个基于流的前端自动化构建工具，记录一下学习的过程。
通过阅读 awesome-nodejs 库的收录，我抽取其中一些应用场景比较多的分类，通过分类涉及的应用场景跟大家分享工具
首先，需要保证电脑安装过Node.js，下载地址：https://nodejs.org/en/
最近，本来是想写一篇关于Promise的文章，在文章规划的时候，发现牵扯的东西有点多，需要再准备一下。
一个功能就是一个模块，多个模块可以组成完整应用，抽离一个模块不会影响其他功能的运行。
昨天的《WEB前端新人，怎么样构建自己的“前端技术体系”？用以在面试中打败其它竞争者》大概的写了下新人如何建立属于自己的前端技术体系，比较简单，正好今晚的先行者课程，就拿它来演示一下。 为什么说要建立属性自己的技术体系呢？前端开发用的技术不都是一样的吗？原因是因为每个人的基础、接受和理解程度不一样，所以每个人走的技术路线都不尽相同。 我个人吧，对于前端技术体系的建立的思路是，从高到低，从顶往下。把大的技术路径连接起来，再往下层层细化，但不要过于深究细节。因为时机不到，过于深入细节会让自己迷失在细节之中。 今
如果希望对在静态页面中引入的相关资源进行压缩（比如：CSS，JavaScript，图片等），可以使用Gulp实现。 当然，还可以其他其他打包工具，比如：Grunt，Webpack等等。
HTML5学堂：CSS代码存在压缩工具、检查工具以及重排属性的工具。今天推荐给大家CKStyle这个工具，顺便也来看看其他的一些工具。 各类CSS检查工具 首先很想说，自己并不常用CSS检查工具，毕竟平日的代码编写是按照规范执行的，自己的习惯是在CSS书写完毕后，使用工具进行压缩一下就收尾了。那么为什么还要写这篇文章呢？主要是自己8班孩子前几日项目，又有人问起，那就整理总结一下，给大家分享分享吧。 CSS代码存在压缩工具、检查工具以及重排属性的工具。这周晚上，把前端开发行业内，曾经或现在比较流行的几个CSS
在这里，我整理了一些我最喜欢的 NPM 包的列表。我也将它们分类，因此信息更加结构化，更易于浏览。
对于前端构建工具 Webpack、babel、eslint 等的每一次升级，就像刚刚经历一场地震似得，最不想面对的就是处理各种 API 的不兼容性，有时还会出现一些奇奇怪怪的问题，为什么还要升呢？并不是为了给自己找事，还是要讲究投入产出比的，也就是最终的收益是要大于产出比的。
一些前端工具和平台介绍 Kissy： 由淘宝前端工程师们发起创建的一个开源 JS 类库。GitHub上可以下载； Alice： 是支付宝的前端css解决方案, 是arale的子集； seajs（ 现在由淘宝和腾讯的人在维护这个项目.seajs简单来说, 就是类似与labjs, requirejs, labjs是可以动态载入js文件, 然后延迟将js功能加载到内存的工具）； 简单的说 Node.js 就是运行在服务端的 JavaScript。node.js 是一个基于Chrome JavaScrip
我自己的经验 如果项目要求支持低版本的 IE 的话（比如 IE7，8），就用较传统的jQuery，Bootstrap，jQuery插件/组件以及类似 Knockout.js 能够提供数据绑定的 JS 库，再加上 require.js + gulp 或者 fis3 做模块化和自动化构建。 如果不需要支持低版本 IE 的话，我们主要使用 React： React – 编写页面组件 Redux – 数据流和状态管理，一般结合 redux-saga 使用 React-router v4 – 前端路由管理（Note：
这里的http静态服务器是指创建静态网站，并且通过node.js创建静态web服务器来向客户端提供服务。一个静态web服务器的例子就是Apache，只需要把网站相关的html，css，javascript，jpg等静态资源放到Apache的目录下，只需要访问主机名就可以显示网页了。
微信小程序自诞生以来，高歌猛进，实现了很多的业务场景，也取代了APP的一些市场份额，现在各种微信小程序层出不穷，下面给大家介绍一下如何反编译小程序。
主要是为了帮助大家搜集一下前端开发中要用到的一些东西，打造一个前端开发工具字典，方便大家查阅。
网站开发正变得越来越专业，涉及到各种各样的工具和流程，迫切需要构建自动化。 所谓"构建自动化"，就是指使用构建工具，自动实现"从源码到网页"的开发流程。这有利于提高开发效率、改善代码质量。 本文介绍如
最近读了 Why I Left Gulp and Grunt for npm Scripts。读完后，觉的这文章写的相当不错，就决定尝试下。
ThinkJS 是一款使用 ES6/7 特性全新开发的 Node.js MVC 框架，它综合了众多框架的设计理念和思想，让使用 Node.js 开发项目更加简单、高效。Node.js 是一个能够在服务器端运行JavaScript的开放源代码、跨平台 JavaScript 运行环境。Node.js 采用 Google 开发的 V8 运行代码，使用事件驱动、非阻塞和异步输入输出模型等技术来提高性能。
英文 | https://dev.to/madza/73-awesome-npm-packages-for-productivity-19p8
二进制数据就像上图一样，由0和1来存储数据。普通的十进制数转化成二进制数一般采用"除2取余，逆序排列"法，用2整除十进制整数，可以得到一个商和余数；再用2去除商，又会得到一个商和余数，如此进行，直到商为小于1时为止，然后把先得到的余数作为二进制数的低位有效位，后得到的余数作为二进制数的高位有效位，依次排列起来。例如，数字10转成二进制就是1010，那么数字10在计算机中就以1010的形式存储。
对现代开发者而言，即使是构建一个很简单的web应用，也要编写很多任务，比如压缩图片、最小化CSS和JavaScript文件、移除调试代码、运行单元测试以及处理很多其它不计其数的任务。当你将绝大部分精力放在业务主流程上，却还需要时刻盯着这些碎片化任务着实有点让人焦头烂额。 Laravel的宗旨是让PHP开发变得轻松愉悦，所以从Laravel 5开始，提供了一个新的被称作LaravelElixir的API。该API集成了Gulp，为编译Laravel项目中的Less、Sass、CoffeeScript以及处理许
前端构建工具就是把开发环境的代码转化成运行环境代码。一般来说，开发环境的代码是为了更好的阅读，而运行环境的代码则是为了能够更快地执行。因此开发环境和运行环境的代码形式也不相同。比如，开发环境的代码，要通过混淆压缩后才能放在线上运行，这样代码体积更小，而且对代码执行也不会有任何影响。
http://yujiangshui.com/grunt-basic-tutorial/
到目前为止，我们还是使用很原始的方式引入前端资源文件 —— 在特定目录下存放完整的 CSS、JavaScript 文件，然后在 HTML 文档中静态引入。
Node.js 8.4.0已经开始支持HTTP/2，执行node命令时，加上--expose-http2选项就可以使用了。
除了在Web服务器领域大展拳脚之外，Node.js同样也在无处不在的JavaScript应用程序创建当中散发出耀眼的光芒。 Node.js:不只是网站 就在仅仅几年之前，Node.js初始版本刚刚诞生
请注意，本文编写于 1122 天前，最后修改于 171 天前，其中某些信息可能已经过时。
vue init webpack prjectName 与 vue create projectName 有什么区别呢？
Node.js 8.4.0 开始实验性的支持HTTP/2，可以使用--expose-http2参数来启用。
1. 什么是前端工程化 自有前端工程师这个称谓以来，前端的发展可谓是日新月异。相比较已经非常成熟的其他领域，前端虽是后起之秀，但其野蛮生长是其他领域不能比的。虽然前端技术飞快发展，但是前端整体的工程生
经济学中的“有需求就有市场”，在技术领域也不例外，Electron 是应需求而生的，Electron 面世之后，非但满足了现有大部分的开发需求，还创造了大量的新需求，开辟了一个新的生态。
作者：马达--腾讯开发工程师 @IMWeb前端社区 前沿 最近有一个项目使用了Vue框架，组件开发是Vue里面的重要思想之一，而官方文档上推荐的最佳实践是通过webpack+vue构建工程，所以在使用Vue之前，我们需要了解webpack这个打包工具。 在此之前，笔者稍微从requirejs的r.js领略了一点点打包思想，因为只需要简单的打包功能，网上很多文章说了一大堆，什么ES6，什么AMD、CMD，什么shimming、公共模块，相信对于什么都不知道的初学者，说到后面就会蒙蔽，所以本文主要介绍webpa
一、运行环境 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
最近发现项目(基于Vue2)构建比较慢， 一次上线发布需要 15 分钟， 效率低下。
此文章介绍vue-cli脚手架config目录下index.js配置文件 此配置文件是用来定义开发环境和生产环境中所需要的参数 关于注释 当涉及到较复杂的解释我将通过标识的方式(如（1）)将解释写到单独的注释模块，请自行查 3.上代码 // see http://vuejs-templates.github.io/webpack for documentation. // path是node.js的路径模块，用来处理路径统一的问题 var path = require('path') module
首先，我想说：“很荣幸在经历了2个月的努力，第一个Node.js项目落地了”。整个项目做下来，还是算比较顺畅的。
本文是对之前同名文章的修正，将所有webpack3的内容更新为webpack4，以及加入了笔者近期在公司工作中学习到的自动化思想，对文章内容作了进一步提升。
一.背景 前端开发的同学,我们经常会碰到需要还原设计稿中的特殊字体.这时,我们可能会采用两种方案 1.使用photoshop将文本图层单独导出成图片; 2.直接引入改字体的字体库.ttf文件 首先第一种方案的缺点,使用图片代替文字,制作和维护的成本很高,前期切图,合并雪碧图比较繁琐,后期修改和维护更是麻烦.同时使用图片,会带来更多的宽带消耗.用户体验方面,用户无法进行文字的选择,复制等操作,体验也不好. 第二种方案,解决了上述的一些问题,但是由于汉字数量太大,导致中文字体文件也较大,通常都会有几M
Webpack是一个JavaScript模块打包工具，如官网宣传的那样。它有一个贴切的名字。但在本文中，我想完成的是详述Webpack真正强大的地方。
主要功能：它提供了友好的前端模块化开发支持，以及代码压缩混淆，处理浏览器端JavaScript的兼容性性能优化等强大的功能。
本文节选自吴浩麟的《深入浅出 Webpack》。 Loader 就像是一个翻译员，能把源文件经过转化后输出新的结果，并且一个文件还可以链式的经过多个翻译员翻译。 以处理 SCSS 文件为例： SCS
In web development we deal with a lot of small technical artifacts. You use HTML to describe page structure, CSS how to style it and JavaScript for logic. Or you can replace HTML with something like Jade, CSS with Sass or LESS, JavaScript with CoffeeScript, TypeScript and the ilk. In addition you have to deal with project dependencies (ie. external libraries and such).
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
即时通信 IM
腾讯会议
