zoukankan      html  css  js  c++  java
  • 前端自动化开发流程

    安装 Node.js 和 npm

    自行百度吧,我 Node.js 安装好久了, 最好还是看官方文档 。

    安装 Yeoman

    我这里很多时候都需要使用 sudo 身份运行 。 windows用户无需输入 sudo   直接输入 npm install -g yo 下面的也是同样不需要输入 sudo 

    sudo npm install -g yo

    检查是否安装成功 。

    yo -v && bower -v && grunt --version

    如果安装成功,应该打印出四个版本号 。

    安装 angular 生成器

    sudo npm install -g generator-angular

    创建项目

    mkdir myproject
    cd myproject
    sudo yo angular          // 以超级管理员的身份运行angular 生成器,避免用户权限问题 
    // 下面的内容根据自身需要选择
    No          // 不使用 Sass
    Yes         // 使用 Bootstrap
    enter       // 回车后等待它自己完成基本框架

    过程如图:


    应用目录:

    启动服务器

    grunt serve 
    

    执行结果如图:同时将打开浏览器。


    在终端按 Ctrl+c 可以退出。

    测试项目

    命令如下:

    grunt test

    执行结果如图:

    上线前的优化

    现在创建一个上线版本。 我们需要规范代码、跑测试、压缩JS和CSS代码(减少网络请求)、优化图片还有编译使用了预处理的代码,让我们的应用尽可能的精简。
    非常神奇的是,上面的工作我们都能通过下面这行命令实现:

    grunt 

    这行命令会遍历Yeoman生成的Grunt任务和配置,然后创建出应用的过渡版本。过一会命令行中会显示出应用的结构和生成这个应用总共花费的时间,以及完成每一项任务所花费的时间。

    此时我们应用的目录下就多了一个 dist 的文件夹。

    如果想在本地查看这个应用的话,运行下面这行命令:

    grunt serve:dist

    它会生成你的项目并且启动本地的服务器。

    参考资料

    伯乐在线的翻译文章:Yeoman官方教程:用Yeoman和AngularJS做Web应用

  • 相关阅读:
    cuda基础----流
    cuda基础---异步并行执行
    cuda基础---cuda通信机制
    cuda基础-----cuda编程模型/软件体系/存储器模型
    大顶堆 小顶堆应用----中位数查找
    Maven配置阿里云镜像
    C++中bool型变量按位取反总是为true
    区分C++的继承、覆盖、隐藏、重载
    C++Primer第5章 语句
    C++Primer第4章 表达式
  • 原文地址:https://www.cnblogs.com/kt520/p/5688701.html
Copyright © 2011-2022 走看看