一、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); }); });