Grunt前端自动化工具

本文章适合对HTML、CSS、JS有一定基础,并且对Nodejs有一定的了解的同学。

学习目标和内容


什么事前端集成解决方案

每一个前端团队都想打造自己的前端开发体系,来帮助团队更高效的工作,目前通常都是东拼西凑,逐渐的整合的过程。

前端集成解决方案个人理解是:

将前端研发领域中各种分散的技术元素集中在一起,并对常见的前端开发问题、不足、缺陷和需求,所提出的一种解决问题的方案。

不同角色理解解对比:

开发者:解决前端工程的根本问题;
专家学者:一套包含框架工具,便于开发者快速构建美丽实用的Web应用程序的工作流,同时这套工作流必须是稳健强壮的。(其中美丽和实用有时候不能同时并存)

解决哪些前端问题?

  • 开发团队代码风格不统一,如何强制开发规范;
  • 前期开发的组件库如何维护和使用;
  • 如何模块化前端项目;
  • 服务器部粉前必须的压缩,检查流程如简化,流程如何完善。

Sass 和 Compass 用法

###RubyInstaller

If you are on Windows, there is a great project to help you install Ruby: RubyInstaller. It gives you everything you need to set up a full Ruby development environment on Windows.
Just download it, run it, and you are done!

Check whether Ruby already is available by opening a terminal

ruby -v

Try Ruby

1.由于国内网络原因,首先我们来修改一下Ruby的source地址

gem sources --remove https://rubygems.org/ //移除默认的
gem sources -a https://ruby.taobao.org/ //添加新的地址
gem sources -l # 查看list

gem update //更新ruby版本

2.安装Sass
如果安装多个版本的sass先下载DevKit构建工具

hexo搭建静态博客

安装

系统环境 Windows 7 64bit

文本编辑器推荐使用 WebStorm 10,
文件编码选择 UTF-8
Git

安装 GitHub for Windows,
登录后会自动在本地配置好 SSH, 执行git shell时也不需要-config用户名和邮箱

新建仓库, Github Pages 的仓库名必须为your_user_name.github.io
your_user_name 替换成你的用户名

配置 SSH, 参考 SSH配置教程Node.js
安装 Node.js, Node 安装包里带有 npm
Hexo

安装 Hexo
//2.x
npm install hexo -g

//3.x
npm install hexo-cli -g
npm install hexo --save

查看 Node 版本

node -v

查看 Hexo 版本

hexo version

创建项目

hexo init hexo-lcx

进入目录

cd hexo-lcx

也可以先建文件夹再进目录初始化

cd hexo-lcx
hexo init

安装依赖包

//2.x
npm install

// 3.x
npm install
// generators
npm install hexo-generator-index --save
npm install hexo-generator-archive --save
npm install hexo-generator-category --save
npm install hexo-generator-tag --save
// server
npm install hexo-server --save
// deployers
npm install hexo-deployer-git --save
npm install hexo-deployer-heroku --save
npm install hexo-deployer-rsync --save
npm install hexo-deployer-openshift --save
// plugins
npm install hexo-renderer-marked@0.25 --save
npm install hexo-renderer-stylus@0.3 --save
npm install hexo-generator-feed@1.0.3 --save
npm install hexo-generator-sitemap@1.0.1 --save

以后所有的命令都在该目录下进行

启动服务

hexo server

用浏览器打开 http://localhost:4000/ 或者 http://127.0.0.1:4000/ 就能看到网页了
推荐使用现代化浏览器(Chrome)获得最佳效果

按 Ctrl+C 停止本地预览服务
使用
目录结构

├── .deploy #需要部署的文件
├── node_modules #Hexo插件
├── public #生成的静态网页文件
├── scaffolds #模板
├── source #博客正文和其他源文件, 404 favicon CNAME 等都应该放在这里
| ├── _drafts #草稿
| └── _posts #文章
├── themes #主题
├── _config.yml #全局配置文件
└── package.json

linux学习随笔

系统分区只分区与格式化

1.分区类型

  • 主分区:最多只能4个 (硬盘由等大小的扇区组成,每个扇区有512字节,512个字节当中446个字节用来记录启动信息的,另外64个字节用来分区表示的,每16个字节一个分区所以只能分4个主分区)
  • 扩展分区:
    最多只能有1个;
    主分区加扩展分区最多有4个;
    不能写入数据,只能包含逻辑分区;
    
  • 逻辑分区

2、格式化:
·格式化(高级格式化)又称逻辑格式化,它是指根据用户选定的文件系统(如FAT16、FAT32、NTFS、EXTZ、EXT3、EXT4等),
在磁盘的特定区域写入特定数据,在分区中划出一片用于存放文件分配表、目录表等用于文件管理的磁盘空间。

分区之分区设备文件名与挂载

硬件 设备文件名
IDE硬盘 dev/hd[a一d]
SCSI/SATA/USB硬盘 /dev/sd[a一p]
光驱 /dev/cdrom或/dev/hdc
软盘 /dev/fd[0-1]
打印机(25针) /dev/1p[0-2]
打印机(USB) /dev/usb/lp[0-15]
鼠标 /dev/mouse

分区设备文件名

  • /dev/hda1(IDE硬盘接口)
  • /dev/sda1(SCSI硬盘接口、SATA硬盘接口[串口]) SATA1,2,3

SublimeText3-Nodejs环境配置

下载SublimeText-Nodejs

本文基于window环境测试的说明,希望能给大家带来帮助。

1、直接下载压缩包后解压到sublime text的package目录中。查看package目录在哪可以通过菜单栏中的Preferences–>浏览程序包Browse Packages直接打开package目录。

2、使用git命令下载到Sublime的Data/package目录

git clone https://github.com/tanepiper/SublimeText-Nodejs 

注意:下载好后,将SublimeText-Nodejs目录名称改为Nodejs