24gulp打包angular1实例和作用域之间通信
一、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: '',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可以直接写，因为它属于监听和接收数据的。
click--给childclick me它是mySelfController的子级它与mySelfController是平级
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);});});
转载于:https://www.cnblogs.com/gushixianqiancheng/p/10966066.html
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！