2 Star 2 Fork 1

zhaoguojun/gulp-angular1

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
该仓库未声明开源许可证文件(LICENSE),使用请关注具体项目描述及其代码上游依赖。
克隆/下载
贡献代码
同步代码
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README

myAngular

angular+gulp项目

配置安装(需要先安装nodejs)

下载源文件后运行

NPM

npm install or cnpm install
gulp

前端自动化

对静态资源进行监听,编译,使用模块如下:

  • browser-sync
  • run-sequence
  • gulp-htmlmin
  • gulp-less
  • gulp-autoprefixer
  • gulp-sourcemaps
  • gulp-cssnano
  • gulp-uglify
  • gulp-imagemin
  • gulp-util

使用browser-sync 来进行本地静态资源服务器及刷新浏览器


gulp.task('browserSync', () => {
    browserSync({
        server: {
            baseDir: './',
            index: 'index.html'
        }
    })
});

使用run-sequence 来同步运行任务插件

gulp.task('default', (callback) => {
    runSequence(['browserSync', 'watch'], callback);
})

引入less,使用gulp-less,gulp-autoprefixer,gulp-sourcemap,gulp-cssnano 来编译压缩


gulp.task('less', () =>
    gulp
    .src('static/less/bootstrap.less')
    .pipe(sourcemaps.init())
    .pipe(less())
    .pipe(sourcemaps.write({ includeContent: false }))
    .pipe(autoprefixer())
    .pipe(sourcemaps.write('/'))
    .pipe(gulp.dest('static/css'))
    .pipe(browserSync.reload({ stream: true }))
);

引入gulp-uglify压缩js


gulp.task('script', () => {
    gulp.src(['controller/*.js', 'controller/**/*.js'])
    .pipe(uglify())
    .pipe(gulp.dest('dist'));
});

引入gulp-imagemin压缩图片


gulp.task('image', () => {
    gulp.src('static/images/**/*')
        .pipe(imagemin({ progressive: true }))
        .on('error', gutil.log)
        .pipe(gulp.dest('dist/images'));
});

引入gulp-util输出压缩日志

项目入口

使用的库主要是

  • requirejs
  • angular
  • angular-ui-router

使用requirejs 来加载页面所需的js

var CURRENT_PATH = '/'
var COMPONENTS_PATH = './components/';

require.config({
    paths: {
        'angular': COMPONENTS_PATH + 'angular/angular',
        'app': CURRENT_PATH + 'app',
        'ui-route': COMPONENTS_PATH + 'angular-ui-router/release/angular-ui-router',
        'route': CURRENT_PATH + 'route/angular.route',
    },
    shim: {
        'angular': {
            exports: 'angular'
        },
        'ui-route': {
            deps: ['angular'],
            exports: 'ui-route'
        }
    }
})

引入

require([
    'angular',
    'app',
    'route',
    'ui-route',
    './controller/controller',
], function() {
    angular.bootstrap(document, ['webapp']);
})

angular 入口 app.js


    var app = angular.module('webapp', [
        'ui.router',
        'webapp.Ctrl',
    ]);
    return app;

angular 路由定义 angular.route.js


var PATH_LAYOUT = './views/common/layout.html';

var PATH_MENU = './views/common/menu.html';

$stateProvider.state('index', {
    url: '/index',
    views: {
        'layout': {
            templateUrl: PATH_LAYOUT
        },
        'side@index': {
            templateUrl: PATH_MENU
        },
        'main@index': {
            templateUrl: './views/homepage/index.html'
        }
    }
})

空文件

简介

gulp-angular 构建前端自动化流程 展开 收起
取消

发行版

暂无发行版

贡献者

全部

近期动态

不能加载更多了
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化
1
https://gitee.com/M-J/gulp-angular1.git
git@gitee.com:M-J/gulp-angular1.git
M-J
gulp-angular1
gulp-angular1
master

搜索帮助