24gulp打包angular1实例和作用域之间通信

其他 2019-06-03 10:31:29 阅读次数: 0 
一、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);
        });
    });

　　

　

猜你喜欢

转载自www.cnblogs.com/gushixianqiancheng/p/10966066.html
今日推荐
NetBSD 禁止提交由 AI 生成的代码
Apache Doris 2.0.10 版本正式发布！
开源日报 | 大模型开战；大模型独角兽被曝卖身；周鸿祎建议谷歌开源所有产品；最大开源AI社区提供1000万美元共享GPU
开源日报 | Chrome内置Gemini的意义不在于Gemini；中国AI追随之路的五大误区；ECharts创始人“下海”养鱼；谷歌I/O开发者大会什么都有，只是没有惊喜
微软回应中国区AI团队“打包赴美”传闻
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
周排行
女程序员是这样被恶搞的
B/S 和 C/S 的优缺点
vector一直申请会怎样？
座头鲸识别比赛(Humpback Whale Identification)总结
Linux高性能服务器编程——I/O复用 select
Mysql连接数据库（当包使用）
通过URI获取的文件路径为null的解决方法
1022-Primes on Interval(素数筛选+二分查找) ZCMU
Python出现： TypeError: expected string or buffer
bzoj2434: [Noi2011]阿狸的打字机 ac自动机+树状数组
每日归档
更多
2024-05-18(4)
2024-05-17(34)
2024-05-16(6)
2024-05-15(24)
2024-05-14(0)
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022