近来在进修angular做背景治理项目，所以把纪录一下开辟流程。

预备东西

gulp &＃8211;用来自动化构建项目
angular &＃8211;搭建项目

开辟目次

本人这个项目的开辟目次是如许的

• components

  • 组件

• css

  • 款式

• img

  • 图片

• lib

  • 依靠的框架（angular、Jq等都放在内里）

• scripts

  • app.js(主如果路由设置)

• index.html

  • 首页

HTML编写











这里是头部


现在是{{pageName}}

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

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", function() {
var cssSrc = [
'app/css/bootstrap/**/*.css',
'app/css/Font-Awesome/**/*.css',
'app/css/system.css',
'app/css/**/*.css'
];
gulp.watch(cssSrc,['minifyCss'], browserSync.reload);
});
//监听js和html模板
gulp.task("watch:ng", function() {
var jsSrc = [
'!app/lib/**/*.js',
'app/scripts/app.js',
'app/**/*.js'
];
var tplSrc = 'app/**/*.html';
gulp.watch(jsSrc,['ngScripts'], browserSync.reload);
gulp.watch(tplSrc,['ngScripts'], 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)})

末了项目演示

基本上根据上述流程，都可以一般开辟项目了。

本demo Git地点

点我点我 点我进入我的Git地点