一、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