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 首页引入路由插件
<script src="vendor/angular-ui-router/release/angular-ui-router.min.js" charset="utf-8"></script>
13 项目创建：#目录根据自己实际开发创建即可：
src
----script
app.js
config
----router.js 配置
controller-----控制器
mainCtrl.js
directive------指令
head.js
foot.js
filter
xxx.js
service
cache.js
----style
index.less
template
head.less
foot.less
转载请注明原文地址: https://ju.6miu.com/read-666660.html
