搭建Angular-Gulp项目

项目简介

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

项目目录

├── 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

<!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

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

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

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

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

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

gulp.task('serve', () => {
    browserSync.init({
        server: {
            baseDir: '.'
        }
    });
    gulp.watch(['./app/index.html']).on('change', browserSync.reload);
});

gulpfile.js

总结以上的 gulpfile.js 文件

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 路径下