• [工具]前端自动化工具grunt+bower+yoman


    安装过程

    • 安装nodejs
    • 安装grunt,bower,yoeman

    命令:(-g 表示全局安装,否则安装到当前目录下)

    npm install -g grunt-cli

    npm install -g yo

    npm install -g bower

    删除已安装:

    npm unintall -g yo

    yoman -- “脚手架”

    • 针对不同web工程,安装相应yoman“脚手架”生成器,eg:angular工程

    npm install -g generator-angular

    • 创建项目文件夹(注意不要有-,空格等其他符号)

    mkdir testAngular

    cd testAngular

    • 生成angular项目,eg:项目名称为“angularProject”

    yo angular angularProject

    • 查看node项目,查看package.json文件,包含生成项目基本信息。

    name为项目名称,而非所在文件夹名称,version为版本号,dependencies为项目运行需要的依赖环境,devDpendencies为项目开发所需要的依赖环境。^表示版本宽松依赖,主版本号符合即可,再执行npm install会自动更新为最近的版本。~表示最小的版本号更新。

    文件功能

    • node-modules:存放项目开发时需要的依赖环境
    • test:测试时使用的文件
    • editorconfig:代码风格设置

    其他命令

    • ls(显示文件夹下文件列表)
    • clear(清屏)
    • rm (删除)
    • touch (新建一个文件)

    bower -- 包管理工具##

    bower是一个包管理器,可以安装需要的框架开发包,eg:jquery

    bower install jquery

    安装组件包

    bower install bootstrap

    如果组件比较小众,没有在bower注册,可按以下方式安装:

    • github短语安装

    如图是jquery在github的短语名,假设jquery没有在bower注册,可以用以下命令安装它

    bower install jquery/jquery

    • 通过项目完整github地址安装

    bower install https://github.com/jquery/jquery.git

    • 直接通过url安装

    bower instal http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js

    bower init

    在当前文件夹下生成bower.json文件,根据bower.json文件安装所需的组件和包

    bower init

    将工具包安装成devDenpendencies

    bower install angular --save-dev

    将工具包安装成运行环境依赖

    bower install angular --save

    .bowerrc

    
    {
    "directory":"bower_components",
    "proxy":"http://prox.aaa.com:8080",      //代理
    "https-proxy":"http://prox.aaa.com:8080",
    "timeout":60000                          //单位毫秒  
    }
    
    

    grunt

    grunt中task,option,target的举例

    compass为一个task,opitions说明具体完成什么操作。dist和server都是target,表示该task针对谁。

    运行单个task,eg:tast为compass

    grunt compass

    只针对某个target运行单个task

    grunt compass:dist

    将task组合起来,一起运行,在Gruntfile.js中有最后的配置:

    grunt build

    老项目如何整合grunt

    • 创建项目文件夹以及文件
    • 创建package.json

    npm init
    npm install grunt --save-dev
    npm install grunt --save

    • 安装load-grunt-tasks插件

    npm install load-grunt-tasks --save-dev

    • 安装time-grunt插件

    npm install time-grunt --save-dev

    • 编写Gruntfile.js文件

    npm install grunt-contrib-copy --save-dev 官方文件拷贝

    npm install grunt-contrib-clean --save-dev 官方文件删除

    Gruntfile.js文件中添加copy和clean两个target

    开源协议

    MIT BSD ISC Apache GPL

    查看端口占用

    列出端口

    netstat -ano
    搜索目的端口
    netstat -aon|findstr "49157"
    搜索目的端口对应PID指向的应用
    tasklist|findstr "2720"

    grunt命令

    • grunt serve
    • grunt serve --allow-remote 包括以下几个小task:
    • wiredep:根据bower.json配置项目依赖,在相应html等文档中加入引用连接
    • cocurrent:server: 把sass文件编译成css文件,复制到.tmp文件下
    • autoprefixer: 添加厂商前缀
    • connnect:livereload
    • watch:监听本地文件修改
  • 相关阅读:
    win10通过ip连接打印机
    tarunexpectedeofinarchive
    软件工程设计阶段的几种图
    代码review checklist
    caffeine的使用
    thetrustanchorsparametermustbenonempty
    mysql explain type的详解
    scp对拷贝文件夹
    虚拟dom与diff算法
    线程池ThreadPoolExecutor的使用
  • 原文地址:https://www.cnblogs.com/smoothLily/p/4206249.html
Copyright © 2020-2023  润新知