# gulp-angular1

**Repository Path**: M-J/gulp-angular1

## Basic Information

- **Project Name**: gulp-angular1
- **Description**: gulp-angular 构建前端自动化流程
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 1
- **Created**: 2018-07-30
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

### myAngular
angular+gulp项目


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

下载源文件后运行

**NPM**
```sh
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 来进行本地静态资源服务器及刷新浏览器

```javascript

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

```

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

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

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

```javascript

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

```javascript

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

```

### 引入gulp-imagemin压缩图片

```javascript

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

```javascript
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'
        }
    }
})

```

### 引入

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

```
### angular 入口 app.js

```javascript

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

```
### angular 路由定义 angular.route.js

```javascript

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'
        }
    }
})

```