WEB前端开发工具的初识

时间:2022-09-17 17:57:36

准备学习BootStrap,然后发现好多插件啊……

从一个开源项目开始学习吧。

     required node.js & bower & grunt

     $ git clone https://github.com/onokumus/Bootstrap-Admin-Template.git yourfoldername
$ cd yourfoldername
$ npm install
$ bower install
$ npm run buildrtl
$ grunt serve

一、node.js

大名鼎鼎的node.js,在这个项目里只被用做打包工具。

去官网下载适合自己开发环境的软件版本,很细致啊,对arm这种架构都做了专门的支持和优化。

个人下载了node-v4.2.4-linux-x64.xz版本,解压后,和tomcat的目录感觉使用是一样的,运行脚本在bin目录下。

做了一个全局命令软链接:

sudo ln -sf /home/yourname/softwarepath/node-v4.2.4/bin/npm /usr/local/bin/

二、bower

这是一个类似Java开发中的gradle一样的js插件安装工具,解决了版本间依赖和版本问题。

npm install bower

安装完以后,默认路径是{your true path}/node-v4.2.4/lib/node_modules/下。

按照官网上的说法npm install -g bower就能进行全局安装,命令可以*调用。

然而我这样做却没有任何效果,应该是权限的原因,没关系,咱可以做全局软链接啊。

三、grunt

这是一个用来给项目中所有的js和css这些文件压缩的工具(功能肯定不限于此)。

npm install grunt

这个可花了我一些时间,因为在其安装包里找不到bin目录?!

去官网看了半天,npm install grunt-cli解决问题。

四、另一个花费不少精力解决的问题

执行bower install,在googlecode上的jquery-inputlimiter.1.3.1.zip无法下载,最直接的想法是*,结果徒劳……

绕路的解决方法:

1.先去国内网站或者能访问的国外网站上下载需要的软件包。

2.找到bower.json中devDependencies项目的下载安装路径。此项目路径是{project}/src/assets/lib/。

3.将下载的软件包手动的解压到步骤2的目录下。

4.删除bower.json中改软件的依赖(其实是有风险的,就是手动安装的软件包可能涉及其他的软件包,但是原理是一样的)。

5.再次执行bower install,通过。

最后,执行grunt serve,竟然能直接访问该项目(非本地文件访问),就是说grunt能够当web服务器用,应该是node.js的功劳吧,我猜。

WEB前端开发工具的初识的更多相关文章

  1. Web前端开发工具总结

    前端开发工具: web前端开发乃及其它的相关开发, 推荐sublime text, webstorm(jetbrains公司系列产品)这两个的原因在于,有个技术叫emmet, http://docs. ...

  2. Brackets - 强大免费的开源跨平台Web前端开发工具IDE (HTML/CSS/Javascript代码编辑器)

    Brackets 是一个免费.开源且跨平台的 HTML/CSS/JavaScript 前端 WEB 集成开发环境 (IDE工具).该项目由 Adobe 创建和维护,根据MIT许可证发布,支持 Wind ...

  3. WebStorm for Mac(Web 前端开发工具)破解版安装

    1.软件简介    WebStorm 是 jetbrains 公司旗下一款 JavaScript 开发工具.目前已经被广大中国 JS 开发者誉为 "Web 前端开发神器".&quo ...

  4. [转载]Brackets - 强大免费的开源跨平台Web前端开发工具IDE (HTML/CSS/Javascript代码编辑器)

    http://brackets.io/ Brackets 是一个免费.开源且跨平台的 HTML/CSS/JavaScript 前端 WEB 集成开发环境 (IDE工具).该项目由 Adobe 创建和维 ...

  5. Web前端开发工具和环境清单

    初级 浏览器 Google Chrome 75.0.3770.100www.google.cn/intl/zh-CN/chrome初级 移动端模拟器 Genymotion 6.0.6www.genym ...

  6. web前端开发工具HBuilder使用技巧之快捷键

    /*注:本教程针对HBuilder5.0.0,制作日期2014-12-31*/ 创建HTML结构: h 8 (敲h激活代码块列表,按8选择第8个项目,即HTML代码块,或者敲h t Enter) 中途 ...

  7. Web前端开发工具

    WebStorm: dreamweaver; Hbuilder: sublime text: 前端神器brackets.

  8. web编辑工具 - Brackets - 强大免费的开源跨平台Web前端开发工具IDE

      简单使用可以参考: https://blog.csdn.net/melon19931226/article/details/68066971/ https://www.iplaysoft.com/ ...

  9. 十款让 Web 前端开发人员更轻松的实用工具

    这篇文章介绍十款让 Web 前端开发人员生活更轻松的实用工具.每个 Web 开发人员都有自己的工具箱,这样工作中碰到的每个问题都有一个好的解决方案供选择. 对于每一项工作,开发人员需要特定的辅助工具, ...

随机推荐

  1. acdream 1686 梦醒(时钟重合)

    Problem Description 娜娜离开了这个王国,走向远方,在旷野上,娜娜看到了一个大时钟,上面的时针分针秒针都在缓缓转动,那只挥着翅膀的天使又出现了,天使说:“外面天已经亮了,娜娜你别睡过 ...

  2. POI3.10 根据Excel模版导出数据测试

    1:所需jar包 2:Mysql数据库表内容如下: 3:代码结构如下: (1)User.java public class User { private int id; private String ...

  3. jQuery对于动态生成的元素绑定无效的问题~~

    问题:很多时候发现,对动态生成的元素绑定click事件是无效的- 原因:直接绑定到动态生成的元素是无效的,是因为Jquery扫描文档找出所有的$(‘’)元素,并把函数绑定到每个元素的click事件上, ...

  4. 使用Google 的 gson方式解析json

    gson支持解析的类型还是比较全面的,包括JavaBean,List<JavaBean>,List<String>,Map等,使用起来也是比较方便,下面根据代码示例给出总结: ...

  5. javascript之prototype原型属性

    这个地方有点绕,仔细理解代码的意义. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quot ...

  6. MySQL 表名区分大小写设置

    1.关闭MySQL服务:         控制面板主页-管理工具-服务-MySQL服务 2.在服务器运行目录找到my.ini 或者my.cnf文件: 在[mysqld]下面增加一行添加 :lower_ ...

  7. 在oracle表中增加字段,并调整字段的顺序

    增加字段的语句很简单,以用户身份连接oracle服务: alter table tablename add(colname coltype); # 填上表名.字段名.字段类型 修改字段顺序前,查看表中 ...

  8. SpringBoot 配置文件 中文乱码

    本方案,支持springboot 很简单 在配置文件中不写中文,写中文的ascll码 直接百度在线转ASCII,用工具 把中文转ASCII码==>\u628a\u4e2d\u6587\u8f6c ...

  9. 【题解】 bzoj3555&colon; &lbrack;Ctsc2014&rsqb;企鹅QQ (字符串Hash)

    题面戳我 Solution 我们分析题意,他要求的是两个字符串只有一个字符不同,然后我们再看长度\(L \leq 200\),显然我们就可以把每一位删除后\(Hash\),然后判断相同个数即可 我一开 ...

  10. PAT基础6-5

    6-5 求自定类型元素的最大值 (10 分) 本题要求实现一个函数,求N个集合元素S[]中的最大值,其中集合元素的类型为自定义的ElementType. 函数接口定义: ElementType Max ...