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