一、gulp打包angular1实例
1、监听通配路径下文件及内容的变化,
2、注入到index.html文件中,注入完毕后渲染该页面,从上往下执行到模块加载时,模块已经存在。
3、执行外来类库
4、执行以ng-app的属性值定义的模块及该模块的控制器
5、执行总权限模块、分权限模块、公共服务模块、公共组件模块、单功能模块
6、比如单功能模块study下,study-data.js定义控制器,index/index.js配置控制器
var proxyMiddleware = require('proxy-middleware');
var url = require('url');
var gulp = require('gulp');
var browserSync = require('browser-sync');
var gulpLoadPlugins = require('gulp-load-plugins')();
var browserSyncReload = browserSync.reload;
var gaze = require('gaze');
var autoPrefix = require('gulp-autoprefixer');
var ftpClient = require('ftp');
var fileSystem = require('fs');
/*Node.js 文件系统(fs 模块)模块中的方法均有异步和同步版本,例如读取文件内容的函数有异步的 fs.readFile() 和同步的 fs.readFileSync()。*/
/*为了查看方便,把功能相同的代码放在一起。实际上应该按依赖关系放置*/
/*1、以下实现:实时监控生产环境的变化*/
/*1(1)、以下实现:为生产环境的变化,提供执行方法*/
function inject_file() {
gulp
.src('src/index.html')
.pipe(gulpLoadPlugins.inject(gulp.src([//inject:只是注入文件,注入后并不执行
'src/module/common-vendor/jquery.js',
'src/module/common-vendor/angular.js',
'src/module/common-vendor/angular-ui.js',
'src/module/common-vendor/echart.js',
'src/module/common-vendor/webuploader.js',
'src/config/main.js',
'src/config/ctrl.js',
'src/config/menu/*.js',
'src/module/{common-serve,common-directive,*}/index/index.js',
'src/module/{common-serve,common-directive,*}/*.js',
'src/module/common-vendor/bootstrap.css',
'src/module/common-vendor/animate.min.css',
'src/module/{common-css,common-directive,common-serve,*}/*.css'
]), {
relative: true
}))
.pipe(gulp.dest('src/'))
.on('end', browserSyncReload);//用on绑定"end"事件,触发时,执行浏览器同步重加载browserSyncReload
}
/*1(2)、以下实现:定义一个监听任务*/
gulp.task('watch_file', function () {
/*监听方式至少有以下三种,我们只需三选一*/
/*监听方式一:*/
var watcher = gulp.watch('js/**/*.js', ['task1','task2']);
watcher.on('change', function(event) {
browserSyncReload();
console.log(event);
});
watcher.on('added', function(event) {
inject_file();
console.log(event);
});
watcher.on('deleted', function(event) {
inject_file();
console.log(event);
});
/*监听方式二:*/
gulp.watch(['url1','url2'],function(event){
if(event.type="changed"){
browserSyncReload();
}else if(event.type="added"){
inject_file();
}else if(event.type="deleted"){
inject_file();
}
});
/*监听方式三:*/
gaze('src/**/*', function () {
this.on('changed', function () {
browserSyncReload();
});
this.on('added', function () {
inject_file();
});
this.on('deleted', function () {
inject_file();
});
});
});
/*1(3)、以下实现:定义本地默认启动的服务器;当在黑屏上输入并执行“gulp”命令时,执行下面“default”任务*/
gulp.task('default', ['watch_file'], function () {
var proxyAllUrls = ['/system', '/event', '/seclity', '/settings', '/icaudit', '/login', '/logs', '/usermgr', '/proptyaudit', '/datclct', '/intfmgr', '/logout'];
proxyAllUrls = proxyAllUrls.map(function (value) {
var singleUrl = url.parse('http://192.168.1.200:5000' + value);
singleUrl.route = value;
return proxyMiddleware(singleUrl);
});
browserSync({
port: 8900,
server: {
baseDir: ['src'],
directory: true,
index: 'index.html',
middleware: proxyAllUrls,
routes: {
'/node_modules': 'node_modules',
'/adminlte': 'adminlte',
'/module/base/img': 'src/img',
'/module/img': 'src/img',
'/static/img': 'src/img'
}
}
});
});
/*以下实现:实时监控生产环境的变化*/
/*2、以下实现:把本地文件打包*/
/*2(1)、以下实现:把本地所有HTML文件打包成JS文件*/
gulp.task('template', function () {
return gulp.src('src/**/*.html')
.pipe(gulpLoadPlugins.htmlmin({
collapseWhitespace: true,
removeComments: true,
minifyCSS: true
}))
.pipe(gulpLoadPlugins.angularTemplatecache({
module: 'app'
}))
.pipe(gulpLoadPlugins.uglify())
.pipe(gulp.dest('.tmp'));
});
/*2(2)、以下实现:把本地所有img文件打包*/
gulp.task('images', function () {
return gulp.src('src/img/**/*')
.pipe(gulpLoadPlugins.imagemin({
progressive: true,
interlaced: true
}))
.pipe(gulp.dest('app/static/img'));
});
/*2(3)、以下实现:把2(1)中形成的JS文件注入到index.html;把index.html里的文件分成JS、CSS两类进行压缩*/
gulp.task('build_all', ['template', 'images'], function () {
return gulp.src(['src/index.html'])
.pipe(gulpLoadPlugins.inject(gulp.src('.tmp/templates.js'), {
starttag: '<!-- inject:partials -->',
relative: true
}))
.pipe(gulpLoadPlugins.useref())
.pipe(gulpLoadPlugins.if('*.js', gulpLoadPlugins.ngAnnotate()))
.pipe(gulpLoadPlugins.if('*.js', gulpLoadPlugins.uglify()))
.pipe(gulpLoadPlugins.if('*.css', autoPrefix({
browsers: ['last 8 versions'],
cascade: false
})))
.pipe(gulpLoadPlugins.if('*.css', gulpLoadPlugins.cleanCss()))
.pipe(gulp.dest('app/static'));
});
/*2(4)、以下实现:给本地所有待打包文件一个打包入口*/
gulp.task('build', ['build_all']);
/*以上实现:把本地文件打包*/
/*3、以下实现:把本地打包好的文件上传至生产环境*/
var ftp_about = {
authentication: {
host: '192.168.1.89',
user: 'ftp',
password: 'cy888888'
},
dev: [{
source: 'app/static/styles/all.min.css',
dist: 'html/develop2.0/styles/all.min.css'
}, {
source: 'app/static/scripts/all.min.js',
dist: 'html/develop2.0/scripts/all.min.js'
}],
fsk: [{
source: 'app/static/styles/all.min.css',
dist: 'html/fsk/styles/all.min.css'
}, {
source: 'app/static/scripts/all.min.js',
dist: 'html/fsk/scripts/all.min.js'
}]
};
function upload_ftp(type) {
var ftpUP = new ftpClient();
ftpUP.on('ready', function () {
ftpUP.put(ftp_about[type][0].source, ftp_about[type][0].dist, function (err) {
if (err) throw err;
fileSystem.unlink(ftp_about[type][0].source, function () {
console.log('删除成功!')
});
});
ftpUP.put(ftp_about[type][1].source, ftp_about[type][1].dist, function (err) {
if (err) throw err;
fileSystem.unlink(ftp_about[type][1].source, function () {
console.log('删除成功!')
});
ftpUP.end();
ftpUP.destroy();
});
});
ftpUP.connect(ftp_about.authentication);
}
gulp.task('build_ftp_dev', ['build_all'], function () {
upload_ftp('dev');
});
gulp.task('build_ftp_fsk', ['build_all'], function () {
upload_ftp('fsk');
});
/*以上实现:把本地打包好的文件上传至生产环境*/
二、作用域之间通信
1、$emit:子传父 传递event与data
2、$broadcast:父传子 传递event与data
3、$on:监听或接收数据 接收event与data
4、$broadcast、$emit事件必须依靠事件(如ng-click等)进行触发
5、$on可以直接写,因为它属于监听和接收数据的。
<div ng-controller="ParentController"><!--父级-->
<div ng-click="clickParent()">click--给child</div>
<div ng-controller="mySelfController"><!--自己-->
<span ng-click="clickMe()">click me</span>
<div ng-controller="ChildController">
它是mySelfController的子级
</div><!--子级-->
</div>
<div ng-controller="siblingsController">
它与mySelfController是平级
</div><!--平级-->
</div>
var app=angular.module('firstApp',[]);//app模块名
app.controller('mySelfController',function($scope){
$scope.clickMe=function(){
$scope.$broadcast('sendChild','我给子控制器传递数据');
$scope.$emit('sendParent','冒泡到父元素')
}
}).controller('ParentController',function($scope){
$scope.$on('sendParent',function(event,data){//监听在子控制器中定义的 sendParent 事件
console.log('mySelfController传过来的',data,event.name,event);//事件名称:sendParent
});
$scope.clickParent=function(){
$scope.$broadcast('sendAllChild','让siblingsController接收到');
}
}).controller('ChildController', function($scope){
$scope.$on('sendChild', function(event,data) {//监听在子控制器中定义的 sendChild 事件
console.log('ChildCtrl', data,event.name,event);// 事件名称:sendChild
});
}).controller('siblingsController', function($scope){
$scope.$on('sendAllChild',function(event,data) {
console.log('值过来吧', data);
});
//下面事件不会触发
$scope.$on('sendParent', function(event,data) {
console.log('平级得不到值', data);
});
$scope.$on('sendChild', function(event,data) {
console.log('平级得不到值', data);
});
});