Code Monkey home page Code Monkey logo

mdata's Introduction

grunt基础架构

一、基本操作

1. 安装node

######通过 https://nodejs.org/download/ ,下载与自己操作系统相符的包进行安装

2. 项目架子

2.1 安装grunt-cli

  1. window在窗口左下角的程序中找到运行,在运行文本框中输入cmd,然后回车打开dos命令行
  2. 输入 npm install -g grunt-cli 命令,回车进行安装,如安装失败可能是因为执行权限不足

2.2 下载脚手架

  1. 目前直接完全运用到我们目前的开发环境可能会带来很多弊端, 所以可以先下载这个架子https://github.com/guopengfei1992/laboratory/archive/master.zip
  2. 然后可以根据文档本地试用一下,看看效果,也可以先作为本地的工具使用,把构建后的代码传到cdn,
  3. 欢迎提出各种不满和需要改进的地方,待后续完善之后,再尝试如何集成到我们的版本控制中。

3. 安装grunt依赖

  1. 进入命令行,进入项目路径
  2. 先切换到项目所在的磁盘下,输入D:,回车便切换到D盘
  3. 然后输入cd 项目路径,进入grunt项目的根目录, grunt工具所需的两个基本文件package.json和Gruntfile.js按照规范需放在项目的根目录,所以输入dir,会看到这俩文件
  4. 输入 npm install, 回车自动安装package.json文件配置的依赖包

4. 运行grunt

  1. 同样打开dos命令行,进入项目根目录
  2. 输入 grunt,回车执行grunt默认任务,默认生产production代码

5. 部署

  • 通过添加参数,来告诉grunt要生产部署环境的代码
  • dos命令行运行 grunt --deploy 即可

二、目录结构

1. 整体结构

  1. 最外层是整个grunt项目
  2. 根目录Gruntfile.js和package.json是必要的两个文件,分别用来自定义grunt任务和项目元数据
  3. 根目录lib目录存放了一些公共的node模块和一些自定义的grunt任务
  4. 根目录develop是我们开发时所写代码的目录,也就是构建代码的源文件目录
  5. 根目录production是grunt构建生产的代码目录,包含一些合并,替换操作,用来调试代码
  6. 根目录deploy是grunt构建生产的用来部署的代码,相比production多了压缩、变量混淆功能,不方便外界查看源码,当然也不方便我们开发调试。
  7. 根目录grunt_task_cfg里的子文件是对不同任务的配置,大多数配置都是通过约定实现的,如果不想遵守约定,可以在配置的基础上增加自定义配置。

2. 目录名称

  1. 开发目录develop,生产目录production、以及最终的部署目录deploy, 三者的目录名字不是定死的,可以修改,任务配置目录grunt_task_cfg同样被写活了, 但修改之后需要在package.json同步修改才可保证grunt运行时不会出错
  2. 在package.json里,配置了一些项目基本信息, 其中devDependencies属性是所有的grunt任务依赖包, 而projectCfg配置的是一些关于项目构建所需的信息, 包含grunt任务配置目录,开发代码目录,生产代码目录,部署代码目录等,用来使一些项目名称可以修改

三、开发

1. 静态资源存放

  1. 假设开发目录为develop,它的每一个子目录代表一个项目。 每个项目里,有属于自己的css,img, js, tpl文件夹,用来分别存放不同种类的文件。
  2. 在css,img,js目录里可以建立子目录,把不同功能的代码进行拆分编写, 在运行grunt任务之后,会把这些子目录的文件进行合并,并以目录名进行命名生成新的合并文件
  3. 不懂?在develop目录,新建一个项目,然后在项目下建一个js目录,然后再建立一个子目录,里面存放两个js文件, 命令行里运行grunt,然后再查看production目录,你就明白啦!

2. 静态资源引用

  1. 开发时,我们的静态资源都在develop目录,但是这些文件是零散的,模块化的, 如果在页面中引入这些文件,会造成因http请求过多带来的网络性能问题。
  2. 因为手动做这些操作又过于繁琐,因此有了自动构建, 在代码开发完毕后,运行一条命令,即可生产调试代码, 因为调试的是生产后的代码,所以也需要我们在html里引用静态资源时也直接引用production目录。
  3. 在生产部署环境代码时,会自动把html里的静态引用路径替换为cdn路径,所以部署时不需要额外的修改

mdata's People

Contributors

dongxiuling avatar gaoshiyong1272 avatar guopengfei116 avatar

Stargazers

 avatar

Watchers

 avatar  avatar  avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.