www.6766.comangular1配合gulp和bower的使用教程_AngularJS_脚本之家

总结

一 安装gulp和bower

二 bower使用

// 依赖var gulp = require;// 进行实例化(gulp-load-plugins这个模块后面可以通过$来操作)var $ = require();// open模块var open = require;var app = { srcPath: 'src/', //源代码路径 devPath: 'build/', //整合后的路径,开发路径 prdPath: 'dist/' //生产环境路径};// 创建任务gulp.task { gulp.src('bower_components/**/*.js') .pipe(gulp.dest(app.devPath + 'vendor')) .pipe(gulp.dest(app.prdPath + 'vendor')) .pipe;});/** html任务* 创建目录src,在src下创建index.html* 创建视图模版目录view,在其中存放视图view的模版*/gulp.task { gulp.src(app.srcPath + '**/*.html') .pipe(gulp.dest .pipe(gulp.dest .pipe;});/** json任务*/gulp.task { gulp.src(app.srcPath + 'data/**/*.json') .pipe(gulp.dest) .pipe(gulp.dest) .pipe;});/** css任务* 在src下创建style文件夹,里面存放less文件。 */gulp.task { gulp.src(app.srcPath + 'style/index.less') .pipe .pipe(gulp.dest .pipe .pipe(gulp.dest .pipe;});/** js任务* 在src目录下创建script文件夹,里面存放所有的js文件*/gulp.task { gulp.src(app.srcPath + 'script/**/*.js') .pipe .pipe(gulp.dest .pipe .pipe(gulp.dest .pipe;});/** image任务* */gulp.task { gulp.src(app.srcPath + 'image/**/*') .pipe(gulp.dest(app.devPath + 'image')) .pipe // 压缩图片 .pipe(gulp.dest(app.prdPath + 'image')) .pipe;});// 每次发布的时候,可能需要把之前目录内的内容清除,避免旧的文件对新的容有所影响。 需要在每次发布前删除dist和build目录gulp.task { gulp.src([app.devPath, app.prdPath]) .pipe;// 总任务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;

www.6766.com ,gulp安装: npm install -g gulpbower安装: npm install -g bower==注:==
angularjs的一些包文件我们是通过bower来管理的

使用bower初始化一个项目: bower init 填写工程名,描述等等那些东西
安装angularjs:bower install –save angular 创建.bowerrc文件

三 自动化工具gulp的使用

初始化文件:npm init 在项目里面安装gulp:npm i –save-dev gulp
安装gulp的依赖插件gulp-clean,gulp-concat,gulp-connect,gulp-cssmin,gulp-imagemin,gulp-less,gulp-load-plugins,gulp-uglif,open
创建gulpfile.js来编写gulp的配置

以上所述是小编给大家介绍的angular1配合gulp和bower的使用教程,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图