AngularJS 项目创建

最新推荐文章于 2024-11-27 02:16:52 发布

原创最新推荐文章于 2024-11-27 02:16:52 发布 · 1.9k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#angularjs #bower #gulp

angularjs 专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍如何使用Git初始化项目，通过cnpm安装依赖，并利用Bower管理前端资源。此外，还介绍了如何设置gulp自动化构建流程，包括压缩、合并文件等操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1 初始化 git

git init

2 安装 cnpm

npm i -g cnpm

3 安装 bower (不能用git_bash安装，否则报错)

cnpm i -g bower

4 项目根目录

bower init

5 安装依赖Angularjs的文件

    bower install --save angular  angular-ui-router angular-cookies angular-validation angular-animate

//如果是固定版本,后面直接 #1.5

6 创建以.开头的文件，在cmd目录下用以下命令：

null>.bowerrc

然后在.bowerrc 里写json目录

[

*directory:"lib"

]

7 可以用 bower 安装/卸载某个js插件

bower install --save requirejs

bower uninstall --save requirejs

|--------------------项目操作----------------------------------------------------|

注：以下命令可直接在vscode 命令终端操作

9 安装自动化构建工具：gulp

/* 优点基于流、任务化

/* 常用API src 读取文件 dest 生成文件 watch 监控文件 task:定制任务 pipe：流的方式处理文件

cnpm i -g gulp

10 初始化项目文件/生成配置文件 node_modules

npm init

11 安装gulp插件 //把nodejs的gulp模块写保存到package.json

cnpm i --save-dev gulp gulp-clean gulp-concat gulp-connect gulp-cssmin gulp-imagemin gulp-less gulp-load-plugins gulp-uglify gulp-plumber open

|-------插件介绍----------|

gulp-htmlmin 看到名字就能知道，这个插件是用来压缩HTML。PS：注释啥的都可以去掉哦，看文档get更多技能哈

gulp-imagemin 除了能压缩常见的图片格式，还能压缩 SVG

gulp-clean-css 压缩 CSS。我原本推荐的是 gulp-minify-css，结果其首页中已建议改用gulp-clean-css...

gulp-uglify 专业压缩 Javascript

gulp-concat 上面几个都是压缩，这插件是管合并的...恭喜，“减少网络请求”的成就达成:)

gulp-autoprefixer 给 CSS 增加前缀。解决某些CSS属性不是标准属性，有各种浏览器前缀的情况，灰常有用

gulp-rename 修改文件名称。比如有时我们需要把app.js改成app.min.js，瞬间高级了

gulp-util 最基础的工具，但俺只用来打日志...

gulp-plumber 作用：编译CSS js时发生错误，不会立即中断线程，只是抛出错误

/----创建文件 gulpfile.js #编写任务

lib、html、 json 、css 、js 、image 、clean 、reload、watch

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($.plumber())
  .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($.plumber())
  .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($.plumber())
  .pipe(gulp.dest(app.devPath + 'image'))
  .pipe($.imagemin())
  .pipe(gulp.dest(app.prdPath + 'image'))
  .pipe($.connect.reload());
});

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

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

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

  open('http://localhost:1234');

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

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

12 配置路由

index.html 首页引入路由插件

13 项目创建：#目录根据自己实际开发创建即可：

src

----script

app.js

config

----router.js 配置

controller-----控制器

mainCtrl.js

directive------指令

head.js