搭建Angular-Gulp项目

项目简介

  • 该项目是一个 angular + gulp 搭建起来的简易框架。
  • Angular 是一组用来开发 Web 页面的框架、模板以及数据绑定和丰富 UI 组件。它支持整个开发进程,提供 Web 应用的架构,无需进行手工 DOM 操作。 AngularJS 很小,只有 60K,兼容主流浏览器。
  • Gulp 是一个自动化构建工具,通过代码优于配置的策略,它可以让简单的任务简单,复杂的任务更可管理;通过流式操作,减少频繁的 IO 操作,更快地构建项目。

项目目录

1
2
3
4
5
6
7
8
9
10
├── app
│ ├── app.js
│ └── index.html
├── build
│ ├── index.html
│ └── js
│ └── app.js
├── gulpfile.js
├── package.json
└── readme.md

初始化项目

在命令面板敲下npm init 初始化项目并生成 package.json 。

  • 新建项目 mkdir angular-gulp
  • 切换进入 cd angular-gulp
  • 初始项目 npm init
  • 安装框架 npm install angular --save-dev ( 如已安装yarn,可直接执行yarn add angular )

建立静态文件

  • 新建文件夹 angular-gulp/src
  • 静态页面 index.html

angular-gulp / src / index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
<meta charset="UTF-8">
<title>Dome</title>
</head>
<body>
<div ng-controller="AppCtrl as vm">
<h1 class="title">Hello</h1>
<a ng-href="{{vm.url}}" target="_blank">Welcome to Abigale's Blog</a>
</div>
<script src="./js/app.js"></script>
</body>
</html>
  • 脚本 app.js

angular-gulp / src / app.js

1
2
3
4
5
6
7
8
9
10
class AppCtrl {
constructor() {
this.url = 'https://abigaleypc.github.io';
}
}
var AppModule = angular.module('app', [])
.controller('AppCtrl', AppCtrl);
module.exports = AppModule;
  • 这时候直接打开index.html,页面中url若可正常点击进入,则这一步成功了,接下来我们将在项目中使用gulp。

开始gulp

  • 安装gulp npm install --save-dev gulp
  • 在根目录下新建 gulpfile.js

angular-gulp / gulpfile.js

1
2
3
4
5
6
var gulp = require('gulp');
gulp.task('default', function() {
// 将你的默认的任务代码放在这
console.log("gulp start")
});
  • 这时候在命令面板上执行 gulp ,将会打印出 “ gulp start ”

task : 清空文件夹

  • gulp可用来压缩代码,将代码放置一个文件夹内,当我们将代码放于该文件夹之前,先清空它,避免堆积的无用文件越来越多
  • npm install --save-dev rimraf

angular-gulp / gulpfile.js

1
2
3
4
5
const rimraf = require('rimraf');
gulp.task('clean', cb => {
rimraf('./build', cb);
});
  • 在build文件夹下新增任意文件或文件夹,当执行命令 gulp clean 时,build之下的文件或文件夹将会被清空

task : 打包代码

  • 新建一个任务 build ,该任务是将文件夹 app 中代码压缩放于 build 文件夹之下
  • npm install --save-dev rimraf gulp-babel gulp-sourcemaps gulp-less gulp-uglify gulp-htmlmin brower-sync

angular-gulp/gulpfile.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
const rimraf = require('rimraf');
const babel = require('gulp-babel');
const sourcemaps = require('gulp-sourcemaps');
const less = require('gulp-less');
const uglify = require('gulp-uglify');
const htmlmin = require('gulp-htmlmin');
const browserSync = require('browser-sync').create();
// html 代码压缩
gulp.task('htmlmin', () => {
gulp.src('./app/index.html') // 找到指定路径下的html
.pipe(htmlmin({
collapseWhitespace: true // 压缩
}))
.pipe(gulp.dest('./build')); // 将压缩后的代码放到build文件夹下
});
// js 代码压缩
gulp.task('script', () => {
gulp.src(['./app/*.js', './app/**/*.js'])
.pipe(babel({
presets: ['es2015', 'stage-0']
}))
// .pipe(uglify()) // 生产模式
.pipe(sourcemaps.write('.')) // 开发模式
.pipe(gulp.dest('./build/js'))
.pipe(browserSync.stream());
});
//样式 代码压缩
gulp.task('style', () => {
gulp.src(['./app/*.less', './app/**/*.less'])
.pipe(less())
.pipe(gulp.dest('./build/css'))
.pipe(browserSync.stream());
});

task : 检测代码并实时更新

angular-gulp / gulpfile.js

1
2
3
4
5
gulp.task('watch', () => {
gulp.watch(['./app/index.html'], ['htmlmin']); // 实时检测html 当该文件发生变化时,就执行 task:htmlmin
gulp.watch(['./app/**/*.js'], ['script']);
gulp.watch(['./app/**/*.less'], ['style']);
});

task : 启动服务器

angular-gulp / gulpfile.js

1
2
3
4
5
6
7
8
9
gulp.task('serve', () => {
browserSync.init({
server: {
baseDir: '.'
}
});
gulp.watch(['./app/index.html']).on('change', browserSync.reload);
});

gulpfile.js

  • 总结以上的 gulpfile.js 文件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
const gulp = require('gulp');
const rimraf = require('rimraf');
const babel = require('gulp-babel');
const sourcemaps = require('gulp-sourcemaps');
const less = require('gulp-less');
const uglify = require('gulp-uglify');
const htmlmin = require('gulp-htmlmin');
const browserSync = require('browser-sync').create();
gulp.task('clean', cb => {
rimraf('./build', cb);
});
gulp.task('htmlmin', () => {
gulp.src('./app/index.html')
.pipe(htmlmin({
collapseWhitespace: true
}))
.pipe(gulp.dest('./build'));
});
gulp.task('script', () => {
gulp.src(['./app/*.js', './app/**/*.js'])
.pipe(babel({
presets: ['es2015', 'stage-0']
}))
// .pipe(uglify()) // 生产模式
.pipe(sourcemaps.write('.')) // 开发模式
.pipe(gulp.dest('./build/js'))
.pipe(browserSync.stream());
});
gulp.task('style', () => {
gulp.src(['./app/*.less', './app/**/*.less'])
.pipe(less())
.pipe(gulp.dest('./build/css'))
.pipe(browserSync.stream());
});
gulp.task('serve', () => {
browserSync.init({
server: {
baseDir: '.'
}
});
gulp.watch(['./app/index.html']).on('change', browserSync.reload);
});
gulp.task('watch', () => {
gulp.watch(['./app/index.html'], ['htmlmin']);
gulp.watch(['./app/**/*.js'], ['script']);
gulp.watch(['./app/**/*.less'], ['style']);
});
gulp.task('default', ['clean', 'style', 'script', 'htmlmin', 'serve'], () => {
gulp.start('watch');
});

启动项目

执行命令 gulp , 并切换到 build 路径下