angular1配合gulp和bower的使用教程
一安装gulp和bower
gulp安装:npminstall-ggulp
bower安装:npminstall-gbower
==注：==angularjs的一些包文件我们是通过bower来管理的
二bower使用
- 使用bower初始化一个项目:bowerinit
- 填写工程名，描述等等那些东西
- 安装angularjs：bowerinstall--saveangular
- 创建.bowerrc文件（注意window最好用命令行创建）
三自动化工具gulp的使用
- 初始化文件：npminit(一直回车下去就可以)
- 在项目里面安装gulp：npmi--save-devgulp
- 安装gulp的依赖插件（只介绍项目中用到的）gulp-clean，gulp-concat，gulp-connect，gulp-cssmin，gulp-imagemin，gulp-less，gulp-load-plugins，gulp-uglif,open（可以和上面安装gulp一样安装）
- 创建gulpfile.js来编写gulp的配置
//依赖
vargulp=require('gulp');
//进行实例化(gulp-load-plugins这个模块后面可以通过$来操作)
var$=require('gulp-load-plugins')();
//open模块
varopen=require('open');
varapp={
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());
});
/*
*html任务
*创建目录src，在src下创建index.html
*创建视图模版目录view，在其中存放视图view的模版
*/
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')
.pipe(gulp.dest(app.devPath+'data'))
.pipe(gulp.dest(app.prdPath+'data'))
.pipe($.connect.reload());
});
/*
*css任务
*在src下创建style文件夹，里面存放less文件。
*/
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任务
*在src目录下创建script文件夹，里面存放所有的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());
});
//每次发布的时候，可能需要把之前目录内的内容清除，避免旧的文件对新的容有所影响。需要在每次发布前删除dist和build目录
gulp.task('clean',function(){
gulp.src([app.devPath,app.prdPath])
.pipe($.clean());
});
//总任务
gulp.task('build',['image','js','less','lib','html','json']);
//服务
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']);
});
//定义default任务
gulp.task('default',['serve']);
总结
以上所述是小编给大家介绍的angular1配合gulp和bower的使用教程，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！