这是一个不靠谱的学习笔记。想到啥写啥
grunt
自动化工具
安装 grunt
``` bash
install grunt
npm install -g grunt-cli
```
``` bash
安装工具
npm install load-grunt-tasks --save-dev
npm install time-grunt --save-dev
继续阅读 »
在Javascript的开发过程中,经常会遇到一些重复性的任务,比如合并文件、压缩代码、检查语法错误、将Sass代码转成CSS代码等等。通常,我们需要使用不同的工具,来完成不同的任务,既重复劳动又非常耗时。Grunt就是为了解决这个问题而发明的工具,可以帮助我们自动管理和运行各种任务。
简单说,Grunt是一个自动任务运行器,会按照预先设定的顺序自动运行一系列的任务。这可以简化工作流程,减轻重复性工作带来的负担。
安装
Grunt基于Node.js,安装之前要先安装Node.js,然后运行下面的命令。
```javascript
sudo npm install grunt-cli -g
```
grunt-cli表示
继续阅读 »
开始使用 HEXO 时就发现默认主题 light 的 style.css 文件是没有经过压缩的,虽然文件本身不大,对博客加载速度不会有太大影响,但是作为喜欢折腾的程序猿,同时为了提升自身博客那么一点点的完美性,一直想去解决这个问题,由于工作比较忙,这个就一直压在心里,直到昨天写完博客,又开始折腾起来。下面记录了具体的修改方式,有需要的同学可以试试。
PS:本博的主题是基于默认主题稍作修改后的样式。
最开始想使用 Grunt 来压缩,但是这样只能在博客文件目录内引入 Grunt 插件。这就使得文件结构不那么清晰,作为比较追求完美的我,最后还是放弃了该方式。什么?你还不知道 Grunt,那么你 out 很久了,简单的说 Grunt
继续阅读 »
Introduction
正如阮一峰所说,前端变化太快了。
前年还在用Grunt, 去年就用了Gulp,而今年都在用Webpack,明年或许都用Brunch了。
我之前一直在用Grunt,后来追Gulp了。后来就实在是不想追了。就老老实实用gulp吧
继续阅读 »
gulp是一个前端的自动化项目构建工具,与grunt
类似,不过相比之下,grunt的配置以及使用较为繁琐,而gulp则比较简单易学。
一个项目从最初的启动到实现,基本上有如下的构建任务:
继续阅读 »
有人说过程序员和码农的本质区别就是程序员会不断探索提高生产力的方法。思维模式的转变是提高生产力的最好方式,但打磨我们的工具也是十分有意义的事,本文将从开发环境,自动化开发,开发工具等几个方面针对前端开发效率的提升和代码质量的提高来展开讨论。
每件事都是一个程序,开发也像程序一样,每个步骤都是一段代码,当开发规模随着文档、代码、需求而增加时,重复的步骤变得越来越多。此时,如果可以像抽象代码一样抽象出一些相同操作就可以大大提升开发效率。因此,出现了更多更优质的工具来代替人工做一些不断重复的开发以减少程序员的工作量。
继续阅读 »
上个月,我在这篇文章《为什么要停止使用 Grunt 和 Gulp》中建议大家使用 npm 作为替代方案,npm 的 scripts 配置可以实现这些构建工具的所有功能,而且更简洁、更优雅和较少的模块依赖和维护开销。本文第一稿大概有 6000 字,深入讲解了如何将 npm 作为替代方案,但那篇文章主要在表达我的观点,而不是作为一篇教程。然而,读者的反馈却很强烈,许多读者告诉我 npm 并不能完全实现这些构建工具提供的特性,甚至有的读者直接给我一个 Gruntfile,然后反问我:“怎么用 npm 来实现这样的构建方案”?所以我决定进一步更新本文,将其作为一个新手入门教程,主要分享如何使用 npm 来完成一些常见的构建任务。
npm
继续阅读 »