最近在学习angular做后台管理项目，所以把记录一下开发流程。
准备工具
gulp --用来自动化构建项目
angular --搭建项目
开发目录
本人这个项目的开发目录是这样的
HTML编写
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<Meta charset="utf-8">
<Meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>angularDemo</title>
<Meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
<link rel="stylesheet" type="text/css" href="css/all.min.css" />
</head>
<body ng-app="app">
<header>这里是头部</header>
<h1>现在是{{pageName}}</h1>
<ul class="nav nav-pills">
<li role="presentation" ui-sref-active="active" ui-sref="index"><a href="#">index</a></li>
<li role="presentation" ui-sref-active="active" ui-sref="module2"><a href="#">第二页</a></li>
<li role="presentation" ui-sref-active="active" ui-sref="module3"><a href="#">第三页</a></li>
</ul>
<section data-ui-view="">
<!--你的页面将加载在这-->
</section>
</body>
<script src="js/lib.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/business.js" type="text/javascript" charset="utf-8"></script>
</html>
app.js的编写
'use strict';
var app = angular.module('app',[
'ui.router','controller','directive','services','templates'
]).config(['$stateProvider','$urlRouterProvider',function($stateProvider,$urlRouterProvider) {
$urlRouterProvider
.otherwise(function(inject,location) {
var path = location.$$path || "";
return '/index';
})
$stateProvider.state('index',{
url: "/index",controller: "indexCtr",templateUrl: 'components/index/index.html'
}).state('module2',{
url: "/module2",controller: "module2Ctr",templateUrl: 'components/module2/module2.html'
}).state('module3',{
url: "/module3",controller: "module3Ctr",templateUrl: 'components/module3/module3.html'
})
}]).run(['$rootScope','$state',function(rootScope,state) {
//初始化
}]);
angular.module('controller',[]);
angular.module('directive',[]);
angular.module('services',[]);
angular.module('templates',[]);
模块的写法
index.html
<div>我是index.html</div>
index.js
angular.module('controller')
.controller('indexCtr',['$scope','$rootScope','$http',function($scope,$rootScope,$http) {
var vm = $scope.vm = {};
$rootScope.pageName = 'index';
}]);
packageJson
{
"name": "angular","version": "1.0.0","description": "angualr with gulp","main": "index.js","scripts": {
"test": "echo \"Error: no test specified\" && exit 1","dev": "gulp","build": "gulp build"
},"repository": {
"type": "git","url": "https://git.coding.net/mumofa/angular_Gulp.git"
},"author": "","license": "ISC","devDependencies": {
"browser-sync": "^2.12.8","chokidar": "^1.5.1","del": "^2.2.0","event-stream": "^3.3.2","gulp": "^3.9.1","gulp-angular-templatecache": "^1.8.0","gulp-concat": "^2.6.0","gulp-minify-css":"^1.2.4","gulp-sass": "^2.3.1","gulp-uglify": "^1.5.3"
}
}
gulp脚本编写
var gulp = require('gulp');
var concat = require('gulp-concat'); //合并文件
var minifycss = require('gulp-minify-css'); //压缩css
var templateCache = require('gulp-angular-templatecache'); //压缩 ng模板
var uglify = require('gulp-uglify'); // 压缩 代码
var es = require('event-stream'); // 事件插件
var del = require("del"); //删除
var browserSync = require("browser-sync"); // 自动刷新
var chokidar = require('chokidar'); //监听
//压缩依赖的js代码
gulp.task('libScripts',function() {
var scriptsGlob = ['app/lib/jQuery/*.js','app/lib/bootstrap/*.js','app/lib/angular/angular.min.js','app/lib/**/*.js'
];
return gulp.src(scriptsGlob)
.pipe(uglify()) //压缩 js代码
.pipe(concat('lib.min.js')) // 拼接成 一个js
.pipe(gulp.dest('dist/js')) //输出到指定目录
});
//压缩ng代码
gulp.task('ngScripts',function() {
var scriptsGlob = [
'!app/lib/**/*.js','app/scripts/app.js','app/**/*.js'
];
var tpl = gulp.src('app/**/*.html')
.pipe(templateCache());
/*return gulp.src(scriptsGlob)
.pipe(uglify()) //压缩 js代码
.pipe(concat('business.min.js')) // 拼接成 一个js
.pipe(gulp.dest('dist/js')) //输出到指定目录*/
return es.merge(es.merge(
gulp.src(scriptsGlob),tpl
)
// .pipe(uglify())
// .pipe(concat('business.min.js'))
.pipe(concat('business.js')))
.pipe(gulp.dest('dist/js'));
});
//输出HTML
gulp.task("distHtml",function(){
return gulp.src("app/index.html")
.pipe(gulp.dest('dist'))
});
//压缩css
gulp.task('minifyCss',function() {
var cssSrc = [
'app/css/bootstrap/**/*.css','app/css/Font-Awesome/**/*.css','app/css/system.css','app/css/**/*.css'
];
return gulp.src(cssSrc) //压缩的文件
.pipe(minifycss()) //执行压缩
.pipe(concat('all.min.css')) // 拼接成 一个js
.pipe(gulp.dest('dist/css')); //输出到指定目录
});
//清空 输出
gulp.task('clean',function(cb) {
del(['dist'],cb);
});
//gulp运行的时候
gulp.task("default",['init']);
gulp.task('watch',['watch:css','watch:ng','watch:html']);
gulp.task("init",['libScripts','distHtml','ngScripts','minifyCss']);
gulp.task('browser-sync',["init","watch"],function() {
browserSync.init({
server: {
baseDir: ["app"]
},middleware: [function(req,res,next) {
next();
}],port: 80
});
});
//监听css
gulp.task("watch:css",'app/css/**/*.css'
];
gulp.watch(cssSrc,['minifyCss'],browserSync.reload);
});
//监听js和html模板
gulp.task("watch:ng",function() {
var jsSrc = [
'!app/lib/**/*.js','app/**/*.js'
];
var tplSrc = 'app/**/*.html';
gulp.watch(jsSrc,['ngScripts'],browserSync.reload);
gulp.watch(tplSrc,browserSync.reload);
});
//监听html
gulp.task("watch:html",function() {
var htmlSrc = ['app/index.html'];
gulp.watch(htmlSrc,['distHtml'],browserSync.reload);
});
process.on('uncaughtException',function(e){console.log(e.stack)})
最后项目演示
基本上按照上述流程，都可以正常开发项目了。
