angularjs运行前准备工作

一、batarang
谷歌浏览器angularjs调试插件
二、第三方依赖管理工具bower
1、先安装nodejs，可通过node -v 查看版本
2、通过npm i -g cnpm 安装插件，创建空目录如webapp（注意小写，否则会出问题）,以便后面用
3、通过cnpm i -g bower安装bower,通过bower -v 查看版本
4、命令行切换到webapp目录下， bower init 进行初始化
5、bower install –save angular 安装angularjs
三、安装gulp
1、cnpm i -g gulp
2、npm init 进行初始化
3、cnpm i –save-dev gulp添加配置文件
4、cnpm i –save–dev gulp-clean 进行单个安装， 多个模块安装,中间用空格隔开 cnpm i –save-dev gulp-clean gulp-concat gulp-connect gulp-cssmin gulp-imagemin gulp-less gulp-load-plugins gulp-plumber gulp-uglify open
四、创建开发目录和生产目录
1、创建gulpfile配置文件
var gulp = require(‘gulp’);
var $ = require(‘gulp-load-plugins’)();
var open = require(‘open’);

//创建开发目录和生产环境目录
var app = {
srcPath: ‘src/’,
devPath: ‘build/’,
prdPath: ‘dist/’
}

//将依赖放入到开发目录和生产环境目录，通过task进行拷贝
gulp.task(‘lib’, function(){
//遍历所有文件
gulp.src(‘bower_components/*/‘)
//api dest进行编写
.pipe(gulp.dest(app.devPath + ‘vendor’))
.pipe(gulp.dest(app.prdPath + ‘vendor’));
});

2、然后cmd中通过gulp lib进行创建，目录下会出现build/dist文件夹

五、创建HTML/js/image文件
1、创建所需文件
var gulp = require(‘gulp’);
var $ = require(‘gulp-load-plugins’)();
var open = require(‘open’);

//创建开发目录和生产环境目录
var app = {
srcPath: ‘src/’,
devPath: ‘build/’,
prdPath: ‘dist/’
}

//将依赖放入到开发目录和生产环境目录，通过task进行拷贝
gulp.task(‘lib’, function(){
//遍历所有文件
gulp.src(‘bower_components/*/‘)(第二个/前两个星号，后一个星号,下同)
//api dest进行编写
.pipe(gulp.dest(app.devPath + ‘vendor’))
.pipe(gulp.dest(app.prdPath + ‘vendor’))
.pipe($.connect.reload());
});

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

//创建json文件,后台数据
gulp.task(‘json’, function(){
//遍历所有文件
gulp.src(app.srcPath + ‘data/*/.json’)
//api dest进行编写
.pipe(gulp.dest(app.devPath + ‘data’))
.pipe(gulp.dest(app.prdPath + ‘data’))
.pipe($.connect.reload());
});

//创建css文件
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());
});

//创建js文件
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());
});

//创建image
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(‘build’, [‘image’, ‘js’, ‘less’, ‘lib’, ‘html’, ‘json’]);

//自动清除
gulp.task(‘clean’, function (){
gulp.src([app.devPath, app.prdPath])
.pipe($.clean());
});

//build之后自动去服务器查看
gulp.task(‘serve’, [‘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’, [‘serve’]);

2、运用gulp命令去执行如gulp html