grunt笔记篇

主流前端集成方案

Yeoman webapp集成脚手架工具：代码校验，测试，压缩

Bower: 下载管理框架、库

Grunt| Gulp  Build tool

codekit  mac平台

解决问题：1、代码风格统一，强制开发规范

2、维护前期开发的组件库

3、模块化前端项目

4、完善服务器部署前的压缩流程

扁平化

Node.js

安装 Nodejs官网

hombrew cakebrew免记命令行

npm Node Package Manager

命令行 $ npm install -g grunt-cli

yo 安装

$npm install -g yo

$yo -v

Bower 安装

$ npm install -g bower

$bower -v

grunt安装

$npm install -g grunt-cli

执行grunt

$grunt

ls

-al 把隐藏文件及以点命名的文件列出来

rm -rf 删除，防止询问

yo 搭建项目

mkdir yo-in-action

cd yo-in-action

mkdir angular-in-action //项目目录名

$cd angular-in-action

$yo angular learnangular//项目名

bower包管理器

$mkdir bower-in-action

$cd bower-in-action

$mkdir jb-in-action//项目名

$cd jb-in-action //包管理地址

$bower install jquery

$bower install bootstrap

1.当bower中不存在包时，可用github短语安装

$bower install jquery/jquery(注册账号名/项目名）

2.完整的项目地址安装

$bower installhttps://github.com/jquery/jquery.git

3.通过url安装

$bower install url

bower 两个配置文件bower.json  bowerrc

bower install 按照配置项去下载，保持最新的组件，避免和全局混淆

bower init 配置项

vim bower.json 预览文件

$bower install angular - -save-dev

vim .bowerrc 生成文件

{

“proxy” : “代理”，

”timeout”:

}

vim index.html 生成文件

grunt 实际应用

$mkdir grunt-in-action

$cd grunt-in-action

$mkdir grunt-by-yo

$cd grunt-by-yo

$yo webapp grunt-by-yo

task   options   target

$grunt sass:dist

$grunt sass

从无到有构建grunt项目

$mkdir grunt-in-action

$cd grunt-in-action

$mkdir grunt-empty

$cd grunt-empty

$vim index.html

$mkdir js

$cd js/

$cd ..

$npm init(老项目本身包含则忽略）

$entry point :index.js

test command:

git responsiry:

license ISC 开源

npm install grunt —save-dev(依赖项）

npm install load-grunt-tasks —save-dev

npm install time-grunt —save-dev

Gruntfile.js

“use strick"

module.exports = function(grunt) {

require(“load-grunt-tasks”)(grunt)

require(“time-grunt”)(grunt)

var config = {

app: “app”,

dist:”dist"

}

grunt.initConfig({

config: config,

copy: {

dist: {

src: “"

dest:

}

});

}

组合

pwd 查看当前目录

al 把隐藏文件和以点命名的文件详细列出来

^较宽松的版本限制

~较严格

yo 全局安装 generator

调用时 yo + 名

npm install -g generator-webapp

yo webapp

yo webapp —help

yo angular:controller MyNewController

npm run serve

git clone

https://github.com/yeoman/yeoman.github.io.gityeoman.io

npm install