AngularJS-webapp
一、搭建开发环境
cnpm i -g bower
创建git仓库
cd webapp dir
git init
创建.bowerrc类文件技巧
null>.bowerrc
css预编译处理:less
常用语法:
定义变量
后代选择器
文件引用
函数
lesscss.cn
在线编译工具
tool.oschina.net/less
cnpm i --save-dev gulp gulp-clean gulp-concat gulp-connect gulp-cssmin gulp-imagemin gulp-less gulp-load-plugins gulp-uglify open
gulpfile.js
var gulp = require('gulp');
var $ = require('gulp-load-plugins')();
var open = require('open');
var app = {
srcPath: 'src/',
devPath: 'build/',
prdPath: 'dist/'
};
gulp.task('lib',function(){
gulp.src('bower_components/**/*.js')
.pipe(gulp.dest(app.devPath + 'vendor'))
.pipe(gulp.dest(app.prdPath + 'vendor'))
.pipe($.connect.reload());
});
gulp.task('html',function(){
gulp.src(app.srcPath + '**/*.html')
.pipe(gulp.dest(app.devPath))
.pipe(gulp.dest(app.prdPath))
.pipe($.connect.reload());
});
gulp.task('json',function(){
gulp.src(app.srcPath + 'data/**/*.json')
.pipe(gulp.dest(app.devPath + 'data'))
.pipe(gulp.dest(app.prdPath + 'data'))
.pipe($.connect.reload());
});
gulp.task('less',function(){
gulp.src(app.srcPath + 'style/**/main.less')
.pipe($.less())
.pipe(gulp.dest(app.devPath + 'css'))
.pipe($.cssmin())
.pipe(gulp.dest(app.prdPath + 'css'))
.pipe($.connect.reload());
});
gulp.task('js',function(){
gulp.src(app.srcPath + 'script/**/*.js')
.pipe($.concat('index.js'))
.pipe(gulp.dest(app.devPath + 'js'))
.pipe($.uglify())
.pipe(gulp.dest(app.prdPath + 'js'))
.pipe($.connect.reload());
});
gulp.task('image',function(){
gulp.src(app.srcPath + 'image/**/*')
.pipe(gulp.dest(app.devPath + 'image'))
.pipe($.imagemin())
.pipe(gulp.dest(app.prdPath + 'image'))
.pipe($.connect.reload());
});
gulp.task('build',['image','js','json','html','less','lib']);
gulp.task('clean',function(){
gulp.src([app.devPath],[app.prdPath])
.pipe($.clean());
});
gulp.task('serve',['build'],function(){
$.connect.server({
root: [app.devPath],
livereload: true,
port: 5000
});
open('http://localhost:5000');
gulp.watch('bower_components/**/*.js',['lib']);
gulp.watch(app.srcPath + '**/*.html',['html']);
gulp.watch(app.srcPath + 'data/**/*.json',['json']);
gulp.watch(app.srcPath + 'style/**/*.less',['less']);
gulp.watch(app.srcPath + 'script/**/*.js',['js']);
gulp.watch(app.srcPath + 'image/**/*',['image']);
});
gulp.task('default',['serve']);
二、代码托管
CODE
先准备公钥
git add .
git commit -m ""
问题:refusing to merge unrelated histories
git pull origin master ----allow-unrelated-histories
git push git@code.csdn.net:Nyan007/webapp.git
AngularJS-webapp的更多相关文章
- angular-seed — AngularJS种子项目
AngularJS Seed 是典型 AngularJS web 应用的应用骨架,可以快速启动你的 AngularJS webapp 项目和这些项目的开发环境. AngularJS Seed 包括一个 ...
- AngularJS搭建环境
一.搭建环境 1.1 调试工具:batarang Chrome浏览器插件 主要功能:查看作用域.输出高度信息.性能监控 1.2 依赖软件:Node.js 下载:https://nodejs.org/e ...
- WebApp开发框架Ionic+AngularJS+Cordova
目前的手机APP有三类:原生APP.WebAPP.HybridApp:HybridApp结合了前两类APP各自的优点,越来越流行. Ionic Ionic是一个新的.可以使用HTML5构建混合移动应用 ...
- Angularjs和Ionic框架搭建webApp
本文原创版权归 简书作者 噜啦啦噜啦啦噜啦噜啦噜 所有,转载请联系作者获得授权,并于文章开头标注原创作者及出处,以示尊重! 文/噜啦啦噜啦啦噜啦噜啦噜(简书作者)原文链接:http://www.jia ...
- AngularJS学习笔记(三) 单页面webApp和路由(ng-route)
就我现在的认识,路由($route)这个东西(也许可以加上$location)可以说是ng最重要的东西了.因为angular目前最重要的作用就是做单页面webApp,而路由这个东西是能做到页面跳转的关 ...
- angularjs之filter过滤器
现在公司用ionic,就是基于angularjs封装了一些api用于webapp,最近用的angularjs的filter确实省了很多代码,现在总结一下! ng比较鸡肋的过滤器,这里就一笔带过吧!鸡汤 ...
- 2014年---移动端webapp个人年度总结
我今年是由零基础开始入门的,刚好我第一家公司入职后就马上让我接手做ipad版的专题app了.(一入门就是移动端开发,是幸运也是艰辛的开始). 我是自学前端的,当然,对Bootstrap,JQuery ...
- [整理]AngularJS移动端开发遇到的问题
最近在开发一个移动WebAPP的小项目,因为之前一直使用AngularJS, 对于这个项目,废话不多说,拿过来就用上了. 开发过程是一路通畅和舒服的,但是,却忽略了一个非常重要的问题,移动2G环境下的 ...
- 搭建 AngularJS+Ionic+Cordova 开发环境并运行一个demo
目前的手机APP有三类:原生APP,WebAPP,HybridApp:HybridApp结合了前两类APP各自的优点,越来越流行. Cordova就是一个中间件,让我们把WebAPP打包成Hybrid ...
- 自定义angularjs分页控件
继昨天写了knockoutjs+ jquery pagination+asp.net web Api 实现无刷新列表页 ,正好最近刚学习angularjs ,故琢磨着写一个angularjs版本的分页 ...
随机推荐
- ggplot2画图时标题无法居中的问题
折腾了一天,终于好了.应该是版本的问题.在R3.2.2能居中(别问我为什么知道),在R3.3.2上就不能.解决方式如下: library(ggplot2) ggplot(data=mtcars, ae ...
- scrapy使用笔记
新建项目 在需要新建项目的目录下发指令 scrapy startproject MySpider 其中MySpider为工程的名字,会新建一个文件夹 进入工程目录 新建一个爬虫 scrapy gens ...
- eclipse修改web项目部署路径 wtpwebapps webapps 的设置
eclipse修改web项目部署路径 wtpwebapps webapps 的设置,在添加完server------>tomcat后,到server控制台进行设置 eclipse默认的部署 ...
- Linux Shell编程 sed命令
概述 sed 是一种几乎可以应用在所有 UNIX 平台(包括 Linux)上的轻量级流编辑器,体积小.所以,它可以对从如管道这样的标准输入中接收的数据进行编辑. sed 主要是用来将数据进行选取.替换 ...
- comet4j开发指南
http://blog.csdn.net/majian_1987/article/details/8489738 好多朋友反映,因排版问题,文章部分边缘内容无法查看.尝试过排版,但仍无法显示正常,所以 ...
- JSP笔记04——架构(转)
原始内容:https://www.tutorialspoint.com/struts_2/basic_mvc_architecture.htm Web服务器需要一个JSP引擎,即一个处理JSP页面的容 ...
- [SCOI2003]蜘蛛难题
题目 对于当年来说似乎是神题?? 做法 对于联通注水来说,我们考虑把所有能平分到水的桶同时加高度,然后暴力判断 My complete code copy来的代码 #include <cstdi ...
- SOA 面向服务架构 阅读笔记(一)
Service Oriented Architecture 面向服务架构 学习笔记(一) 1.业务自由 1.1 在很多企业中,业务和IT技术是各自独立的,无法使用通用的统一语言进行管理. 1.2 ...
- python里两种遍历目录的方法
os.walk 函数声明:os.walk(top,topdown=True,onerror=None) (1)参数top表示需要遍历的顶级目录的路径. (2)参数topdown的默认值是“True”表 ...
- MSER最稳定极值区域源码分析
最稳定极值区域介绍 如把灰度图看成高低起伏的地形图,其中灰度值看成海平面高度的话,MSER的作用就是在灰度图中找到符合条件的坑洼.条件为坑的最小高度,坑的大小,坑的倾斜程度,坑中如果已有小坑时大坑与小 ...