今天的前端如果没有用到 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的更多相关文章

  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 ...

  2. [front]有效开展一个前端项目

    今天的前端如果没有用到 npm,效率是比较低的:所以要从使用的工具来讲. 1. 一切都依赖于 nodejs: 下载一个 linux 的源码包就可以开始安装了. $ wget https://nodej ...

  3. 使用gulp来构建一个前端项目

    什么是gulp? gulp是一个前端项目构建工具,是自动化项目的构建利器,它不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成.你可以使用gulp及其插件对你的项目代码 ...

  4. 从一个前端项目实践 Git flow 的流程与参考

    Git flow 出自 A successful Git branching model,这里使用了一个前端项目配合本文稿实施了 git flow 并记录流程作出示例和参考,对 hotfix 与持续部 ...

  5. vsCode怎么为一个前端项目配置ts的运行环境

    vsCode为一个前端项目配置ts的运行环境,ts文件保存的时候自动编译成js文件: 假设此前端项目名称为Web:文件结构如图 1. 在根目录中新建一个“.vscode”文件夹,里面建一个“tasks ...

  6. webpack(构建一个前端项目)详解--升级

    升级一个正式的项目结构 分离webpack.config.js文件: 新建一个webpack.config.base.js任何环境依赖的wbpack //public webpack const pa ...

  7. webpack(零工程构建一个前端项目)详解

    工作流程记录: 1.初始化项目:npm init -y 2.安装webpack,vue,vue-loader npm install webpack vue vue-loader 3.按装之后根据警告 ...

  8. 前端项目中gulp的使用

    在公司项目开发中,有一个前端项目,我们使用gulp来生成目标文件(css,js,html文件) 进入到这个项目目录中  C:\My Project\FrontEnd\TestBuilder 然后依次运 ...

  9. [Vue 牛刀小试]:第十六章 - 针对传统后端开发人员的前端项目框架搭建

    一.前言 在之前学习 Vue 基础知识点的文章中,我们还是采用传统的方式,通过在 html 页面上引用 vue.js 这个文件,从而将 Vue 引入到我们的项目开发中.伴随着 Node.js 的出现, ...

随机推荐

  1. 使用CSMA/CD协议一个计算题

    题干: 首先计算一下A这个以太网所容许的最短的帧它的发送帧的长度时间为: (8(前同步码为8)+64(最短帧长))*8(单位转换b到B)=576比特 有关于单位转换: B是Byte的缩写,B就是Byt ...

  2. QT | QT MSVC 2015 + VS 2015开发环境配置及GIT设置

    1.下载: 所有Qt版本的下载地址: http://download.qt.io/archive/qt/ 实际使用了http://download.qt.io/archive/qt/5.7/5.7.1 ...

  3. c++简单实现对mysql数据库操作

    1.连接数据库 #include <mysql.h> #include <iostream> #include<string> #include<vector ...

  4. java.io.EOFException ValueOperations.increment()操作后,获取值时有的bug

    ---恢复内容开始--- 今天使用spring-data-redis包操作redis,就是简单的使用redis的计数功能,在redis中的操作命令如:incr key;get key; 这两步操作使用 ...

  5. Oracle的导入和导出

    导出命令: EXP 用户名/密码@数据库名  BUFFER=64000 file=G:\dmp\full1.dmp  OWNER=用户名 导入命令: IMP 用户名/密码@数据库名 BUFFER=64 ...

  6. SSM框架的配置

    主要是这三个配置文件 web.xml(用来加载和初始化下面的配置文件) applicationcontet.xml(就是Spring的配置文件,一般包括声明式失误等等AOP) Sprimgmvc,xm ...

  7. PythonStudy——文件操作 File operation

    # 文件:就是硬盘的一块存储空间 # 1.使用文件的三步骤: # 打开文件- 得到文件对象:找到数据存放在硬盘的位置,让操作系统持有该空间,具有操作权# 硬盘空间 被 操作系统持有# 文件对象f 被 ...

  8. shell脚本实现定时备份某文件

    1:目标       实现在图像化界面输入需要备份的源文件路径.目标路径,定时的时间.然后通过输入的信息,把需要备份的源文件打包放到指定的目标路径下以执行定时任务的时间为子目录       把/she ...

  9. Fiddler: 如何抓取HTTPS协议的网页

    作者:韦玮  转载请注明出处 Fiddler默认只能抓取HTTP协议的网页,不能抓取HTTPS协议的网页,而我们很多时候,都需要抓HTTPS协议的网页,比如抓淘宝数据等.今天,韦玮老师会为大家讲解如何 ...

  10. Linux系统目录权限chmod误操作权限修复方法

    Linux中,如果意外误操作将/目录权限批量设置,比如chmod -R 777 / ,系统中的大部分服务以及命令将无法使用,这时候可以通过系统自带的getfacl命令来拷贝和还原系统权限,若是其他系统 ...