随笔分类 - 前端工具
前端的一些工具，比如grunt、fis、gcc、yui等
摘要：babel-preset-env是非常重要且常用的一个插件预设，掌握它的用法以及实现原理非常有必要。
本文主要内容包括：babel-preset-env是什么、入门实例、如何配置以支持特定版本的 node/浏览器、实现原理等。
本文所有例子可以在 笔者的github上 找到。
阅读全文
摘要：主要包括：Babel如何进行转码、插件编写的入门基础、实例讲解如何编写插件。
阅读本文前，需要读者对Babel插件如何使用、配置有一定了解，可以参考笔者之前的文章。
本文所有例子可以在 笔者的github 找到，欢迎访问笔者博客获取更多相关文章。
阅读全文
摘要：babel只负责语法转换，比如将ES6的语法转换成ES5。但如果有些对象、方法，浏览器本身不支持，比如全局对象Promise、WeakMap等、静态函数Array.from、Object.assign等，实例方法Array.prototype.includes 等，此时需要使用babel-polyfill来模拟这些对象、函数、方法的实现。本文主要内容包括：什么是babel-polyfill，如何使用，如何通过按需加载进行性能优化。
此时，需要引入`babel-polyfill`来模拟实现这些对象、方法。
阅读全文
摘要：在nodejs中，提供了querystring这个模块，用来做url查询参数的解析。在做node服务端开发的时候基本都会用到，使用非常简单，一般只需要记住 .parse()、.stringify() 两个方法就可以了。
阅读全文
摘要：谈到node断点调试，目前主要有三种方式，通过`node内置调试工具`、`通过IDE（如vscode）`、`通过node-inspector`，三者本质上差不多。本文着重点在于介绍 **如何在本地通过node-inspector 调试远程服务器上的node代码**。
在进入主题之前，首先会对三种调试方式进行入门讲解，方便新手理解后面的内容。至于老司机们，可以直接跳到主题去。
阅读全文
摘要：前言 本项目基于FIS2，没了。其实fis项目本身就提供了php版本的范例，这里翻译成node版本。 项目地址： "https://github.com/chyingp/fis receiver" 服务端接收脚本部署 首先，克隆项目 跟着，安装依赖 然后，启动服务 配置修改：fis conf.js
阅读全文
摘要：之前挖了个坑，准备写篇gulp插件编写入门的科普文，之后迟迟没有动笔，因为不知道该肿么讲清楚Stream这货，毕竟，gulp插件的实现不像grunt插件的实现那么直观。 好吧，于是决定单刀直入了。文中插件示例可在这里找到：https://github.com/chyingp/gulp-preproc...
阅读全文
摘要：写在前面 本来是想写个如何编写gulp插件的科普文的，突然探究欲又发作了，于是就有了这篇东西。。。翻了下源码看了下gulp.src()的实现，不禁由衷感慨：肿么这么复杂。。。 进入正题 首先我们看下gulpfile里面的内容是长什么样子的，很有express中间件的味道是不是～我们知道.pipe()
阅读全文
摘要：grunt-inline是楼主之前写的一个插件，主要作用是把页面带了__inline标记的资源内嵌到html页面去。比如下面的这个script标签。技术难度不高，主要就是通过正则将符合条件的script标签等匹配出来。当时就在想：如果有那么一个插件，能够帮我们完成html解析就好了！没错，真有——c...
阅读全文
摘要：文章已经收录至fis官网：http://fis.baidu.com/docs/dev/more.html。本文对构建工具fis进行概要性的介绍，包括与grunt的差别、入门使用、、项目配置、插件开发、二次开发等，比较适合fis初学者。
阅读全文
摘要：前端的童鞋对grunt应该不陌生，前面也陆陆续续的写了几篇grunt入门的文章。本篇文章会更进一步，对grunt的源码进行分析。文章大体内容内容如下： grunt整体设计概览 grunt-cli源码分析 grunt-cli模块概览 grunt-cli源码分析 写在后面 grunt整体设...
阅读全文
摘要：构建工具grunt的一些实用总结，如 常用的任务配置方式、不同配置方式各自的适用场景、如何自定义任务、常见API的介绍等。
阅读全文
摘要：晚上review了下grunt-inline的issues，看到有个兄弟pull request，修正了0.3.0版本的一个bug。于是就merge了下，然后发布了0.3.1版本（这里）。 npm publish后，突然想到一个问题，发布了这么多个版本了，但好像都没有打过tag，这个不利于版本回溯以...
阅读全文
摘要：一、插件简介 将引用的外部资源，如js、css、img等，内嵌到引用它们的文件里去。 二、使用场景 在项目中，出于某些原因，有的时候我们需要将一些资源，比如js脚本内嵌到页面中去。比如我们的html页面中有这么段小脚本，如果这么直接发布到线上，就会多了一个请求，这从性能优化的角度来说是不合理的。 ...
阅读全文
摘要：本文是gulp的入门级介绍，主要内容包括什么是gulp，gulp与grunt有什么区别，gulp可以解决grunt存在的哪些问题，以及一个简单的说明例子。 什么是gulp gulp的官方定义非常简洁：基于文件流的构建系统。这里强调了 streaming，也就是gulp与grunt的在构建流程上的主要...
阅读全文
摘要：FIS(Front-end Integrated Solution )，是百度的前端集成解决方案。最近几天在研究前端构建的东西，就顺便了解了下，果断各种高大上，可以到FIS官网围观感受一下。如果对fis还不熟悉的童鞋，可以跑下官网的小demo体验一下。 好了，这篇文章不是fis的科普文，官方文档已经...
阅读全文
摘要：npm的包安装分为本地安装（local）、全局安装（global）两种，从敲的命令行来看，差别只是有没有-g而已...更直观的例子 下面就直接看下，当我们在项目目录下运行grunt task（task为具体的grunt任务名，自行替换）时，发生了什么事情。这里要借助node-inspector...
阅读全文
摘要：之前调试grunt插件时，都是通过人肉打log来调试。不仅效率低，而且会产生一堆无用的代码。于是简单google了下node断点调试的方法，总结了下。 借助node-inspector，我们可以通过Chrome浏览器的调试工具来调试。 一、安装node-inspector 二、监听Nodejs的de
阅读全文