[FE] 有效开展一个前端项目1
今天的前端如果没有用到 npm,效率是比较低的;所以要从使用的工具来讲。
1. 一切都依赖于 nodejs:
下载一个 linux 的源码包就可以开始安装了。
$ wget https://nodejs.org/dist/v4.4.7/node-v4.4.7.tar.gz
$ ./configure --prefix=/usr/local/nodejs
$ make && sudo make install
装好后,npm 已经在/usr/local/nodejs/bin/npm。
如果之前有安装过 nodejs 的情况,最好确认下当前使用的是否是刚安装的命令:
$ which node
$ which npm
把不需要的旧版本删除即可。
2. 用 npm init 建一个项目依赖包的说明文件 package.json:
{
"name": "front",
"description": "my application",
"version": "0.0.1",
"author": {
"name": "farwish"
},
"main": [
"index.js"
],
"license":"MIT",
"repository":{},
"dependencies": {
}
}
3. 任务流命令 gulp:
先把 nodejs 的命令加到环境变量里,可以直接加 /usr/local 到 PATH 中。
( PATH=$PATH:$HOME/.local/bin:$HOME/bin:/usr/local )
$ source ~/.bash_profile
$ npm install -g gulp # 全局安装,gulp 命令会装到 /usr/local/nodejs/bin/
$ npm install gulp --save # 安装到当前项目的 node_modules/,并写入package.json的dependencies
如果出现权限错误,一般是 /usr/local/nodejs/lib/node_modules 没有写权限,全局安装用 root 用户;
本地 Local gulp 用普通用户安装,把 npm 建立在项目中的 node_modules/ 所属改成当前用户和用户组。
4. 一个实用库 browserSync:
browserSync 能检测文件变动并自动刷新浏览器,不依赖浏览器插件。
$ npm install browser-sync --save
(browser-sync start --server --files "src/*.html" # 用于静态文件,监测src目录的html文件)
(browser-sync start --proxy "localhost:8080" --file "css/*.css" # 动态站点使用代理模式)
5. 建一个任务流文件 gulpfile.js:
在 gulpfile 中使用 browserSync 库。
var gulp = require('gulp');
var browserSync = require('browser-sync');
var path = {
src:"src/*.html"
}; // 名叫 browser-sync 的任务
gulp.task('browser-sync', function() {
browserSync({
files: "**",
server: {
baseDir: "./"
}
});
}); // gulp 自动执行 default 任务
gulp.task('default', ['browser-sync']);
$ gulp # 运行gulp,然后编辑并保存监听的文件就能看到效果
6. 第一开发框架 angularjs:
小巧的 css 库有 pure,功能型的有 uikit,至于 bootstrap 已经满大街,随便选。
js 框架首选 angularjs,不过库的尺寸都不小。
angular 也是一个能快速搭建原型的工具,通过 ui-router 很容易组织页面间关系。
完全抛弃 dom 操作和 load 操作的感觉,和 jquery 时代有巨大差别。
angular 的难点在于概念,各种 $provider 令人迷惑,实际上框架我们知道怎么用就行,不用盯住具体哪个是什么概念,能用起来,后面省事省力。
Link: http://www.cnblogs.com/farwish/p/5656959.html
[FE] 有效开展一个前端项目1的更多相关文章
- [FE] 有效开展一个前端项目2 (vuejs-templates/webpack)
1.安装 nodejs.npm $ curl -sL https://deb.nodesource.com/setup_10.x | sudo -E bash - $ sudo apt-get i ...
- [front]有效开展一个前端项目
今天的前端如果没有用到 npm,效率是比较低的:所以要从使用的工具来讲. 1. 一切都依赖于 nodejs: 下载一个 linux 的源码包就可以开始安装了. $ wget https://nodej ...
- 使用gulp来构建一个前端项目
什么是gulp? gulp是一个前端项目构建工具,是自动化项目的构建利器,它不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成.你可以使用gulp及其插件对你的项目代码 ...
- 从一个前端项目实践 Git flow 的流程与参考
Git flow 出自 A successful Git branching model,这里使用了一个前端项目配合本文稿实施了 git flow 并记录流程作出示例和参考,对 hotfix 与持续部 ...
- vsCode怎么为一个前端项目配置ts的运行环境
vsCode为一个前端项目配置ts的运行环境,ts文件保存的时候自动编译成js文件: 假设此前端项目名称为Web:文件结构如图 1. 在根目录中新建一个“.vscode”文件夹,里面建一个“tasks ...
- webpack(构建一个前端项目)详解--升级
升级一个正式的项目结构 分离webpack.config.js文件: 新建一个webpack.config.base.js任何环境依赖的wbpack //public webpack const pa ...
- webpack(零工程构建一个前端项目)详解
工作流程记录: 1.初始化项目:npm init -y 2.安装webpack,vue,vue-loader npm install webpack vue vue-loader 3.按装之后根据警告 ...
- 前端项目中gulp的使用
在公司项目开发中,有一个前端项目,我们使用gulp来生成目标文件(css,js,html文件) 进入到这个项目目录中 C:\My Project\FrontEnd\TestBuilder 然后依次运 ...
- [Vue 牛刀小试]:第十六章 - 针对传统后端开发人员的前端项目框架搭建
一.前言 在之前学习 Vue 基础知识点的文章中,我们还是采用传统的方式,通过在 html 页面上引用 vue.js 这个文件,从而将 Vue 引入到我们的项目开发中.伴随着 Node.js 的出现, ...
随机推荐
- box-shadow做出一条线两种颜色
今天同事问我一个问题,说下图的效果是怎么实现的 我当时想都没有想说这不就是两条线嘛,他说是一条线用box-shadow做出来的,之前也没有遇到过,觉得很有意思就试了一把. 语法 box-shadow: ...
- C#如何运行外部程序(打开可执行程序):ShellExcute和Process
最近的任务用到C#来调用C++内核程序,也就是C++编译运行后生成的.exe文件.网搜了一下C#中运行外部程序大致有两种方法,在此稍作总结: (1)使用API函数ShellExcute 添加引用 us ...
- JVM垃圾回收算法解析
JVM垃圾回收算法解析 标记-清除算法 该算法为最基础的算法.它分为标记和清除两个阶段,首先标记出需要回收的对象,在标记结束后,统一回收.该算法存在两个问题:一是效率问题,标记和清除过程效率都不太高, ...
- pam模块初探
- oracle获取连续时间
SELECT rownum, (to_date('2015-01-01', 'yyyy-mm-dd') + rownum - 1) AS show_time FROM dualCONNECT BY r ...
- VUE 微信开发
1.工具 1.电脑版微信客户端window版本(1.x.x 亲测可以在谷歌浏览器进行微信授权登录,版本越来越好)或者用微信开发工具.很久之前就是用这个方法搞定用chrome进行微信登录授权. 2.us ...
- JavaBasic_正则表达式
就是符合一定规则的字符串 规则字符在java.util.regex.Pattern类中 字符转义\. 匹配.字符\* 匹配*字符\\ 匹配\字符\n 新行(换行)符 ('\u000A') \r 回车符 ...
- js window.location用法
<script> //设置或获取 href 属性中跟在问号后面的部分. console.log(window.location.search)//设置或获取对象指定的文件名或路径conso ...
- 阿里云ECS配置iptables
在阿里云ECS安装flannel.docker.kubernetes后,在多个node运行docker run -it bash,然后ping互相的ip,发现docker容器间网络没通,发现宿主机的i ...
- flutter环境配置
java环境安装 做基于android的原生app,首先需要安装java环境,需要到官网https://www.oracle.com/technetwork/java/javase/downloads ...