Angular js 单页应用环境搭建

Posted 2021-01-08 peakpanblog

目录

• Angular js 单页应用的开发环境搭建
  • 简介
    • 学习angularjs 1.x.x的应用，并以此做一个webapp的前端单页应用
    • 来源慕课网教学视频
  • 开发环境搭建
    • NodeJs环境安装, 安装地址
    • 全局安装bower, 解决js的依赖管理
    • 全局安装自动化管理工具gulp
    • 安装angularjs 依赖及相关依赖
    • 结束语
    • 附目录结构图

Angular js 单页应用的开发环境搭建

简介

一直都在做后端的开发，因为最近项目中有用到Angularjs,对这个google开发的前端框架很感兴趣，于是找了一个相关的资料学习了一下，写下文章记录一下学习的过程。

学习angularjs 1.x.x的应用，并以此做一个webapp的前端单页应用

来源慕课网教学视频

开发环境搭建

NodeJs环境安装, 安装地址

全局安装bower, 解决js的依赖管理

npm install bower -g

全局安装自动化管理工具gulp

全局安装gulp及相关依赖

npm install -g gulp
npm install gulp-clean gulp-concat gulp-cssmin gulp-imagemin gulp-less gulp-load-plugins gulp-plumber gulp-uglify open

配置文件gulpfile.js

var gulp = require("gulp");
var $ = require("gulp-load-plugins")();
var open = require(‘open‘);

var app = {
        srcPath: ‘src/‘,
        devPath: ‘build/‘,
        prdPath: ‘dist/‘
}

gulp.task(‘lib‘, function() {
    gulp.src(‘bower_components/**/*.js‘)
    .pipe(gulp.dest(app.devPath + ‘vendor‘))
    .pipe(gulp.dest(app.prdPath + ‘vendor‘))
    .pipe($.connect.reload())
});

gulp.task(‘html‘, function() {
    gulp.src(app.srcPath + ‘**/*.html‘)
    .pipe(gulp.dest(app.devPath))
    .pipe(gulp.dest(app.prdPath))
    .pipe($.connect.reload())
});

gulp.task(‘json‘, function() {
    gulp.src(app.srcPath + ‘data/**/*.json‘)
    .pipe(gulp.dest(app.devPath + ‘data‘))
    .pipe(gulp.dest(app.prdPath + ‘data‘))
    .pipe($.connect.reload())
});

gulp.task(‘less‘, function() {
    gulp.src(app.srcPath + ‘style/index.less‘)
    .pipe($.less())
    .pipe(gulp.dest(app.devPath + ‘css‘))
    .pipe($.cssmin())
    .pipe(gulp.dest(app.prdPath + ‘css‘))
    .pipe($.connect.reload())
});

gulp.task(‘js‘, function() {
    gulp.src(app.srcPath + ‘script/**/*.js‘)
    .pipe($.concat(‘index.js‘))
    .pipe(gulp.dest(app.devPath + ‘js‘))
    .pipe($.uglify())
    .pipe(gulp.dest(app.prdPath + ‘js‘))
    .pipe($.connect.reload())
});

gulp.task(‘image‘, function() {
    gulp.src(app.srcPath + ‘image/**/*‘)
    .pipe(gulp.dest(app.devPath + ‘image‘))
    .pipe($.imagemin())
    .pipe(gulp.dest(app.prdPath + ‘image‘))
    .pipe($.connect.reload())
});

gulp.task(‘clean‘, function() {
    gulp.src([app.devPath, app.prdPath])
    .pipe($.clean())
});

gulp.task(‘build‘, [‘image‘, ‘json‘, ‘js‘, ‘less‘, ‘html‘, ‘lib‘]);

gulp.task(‘server‘,[‘build‘], function () {
    $.connect.server({
        root:[app.devPath],
        livereload:true,
        port:1234
    });
    open(‘http://localhost:1234‘);

    gulp.watch(app.srcPath + ‘script/**/*.js‘, [‘js‘]);
    gulp.watch(app.srcPath + ‘**/*.html‘, [‘html‘]);
    gulp.watch(app.srcPath + ‘data/**/*.json‘, [‘json‘]);
    gulp.watch(app.srcPath + ‘image/**/*‘, [‘image‘]);
    gulp.watch(app.srcPath + ‘style/**/*.less‘, [‘less‘]);
    gulp.watch(app.srcPath + ‘bower_components/**/*.js‘, ‘lib‘);
});

gulp.task(‘default‘, [‘server‘]);

安装angularjs 依赖及相关依赖

"dependencies": {
    "angular": "1.5.8",
    "angular-ui-router": "ui-router#0.3.1",
    "angular-cookies": "1.5.8"
 }

结束语

感觉bower与gulp是很强大而且很实用的工具，bower能很方便的解决依赖问题，gulp自动化更新发布，在开发中提供了很大的便利

附目录结构图