angular1配合gulp和bower的使用教程
网络编程 2021-07-04 17:33www.168986.cn编程入门
这篇文章主要介绍了angular1配合gulp和bower使用教程,本文给大家介绍的非常详细,具有参考借鉴价值,需要的朋友可以参考下
一 安装gulp和bower
gulp安装: npm install -g gulp
bower安装: npm install -g bower
==注== angularjs的一些包文件我们是通过bower来管理的
二 bower使用
- 使用bower初始化一个项目: bower init
- 填写工程名,描述等等那些东西
- 安装angularjsbower install --save angular
- 创建.bowerrc文件(注意window最好用命令行创建)
三 自动化工具gulp的使用
- 初始化文件npm init(一直回车下去就可以)
- 在项目里面安装gulpnpm i --save-dev gulp
- 安装gulp的依赖插件(只介绍项目中用到的)gulp-clean,gulp-concat,gulp-connect,gulp-cssmin,gulp-imagemin,gulp-less,gulp-load-plugins,gulp-uglif,open(可以和上面安装gulp一样安装)
- 创建gulpfile.js来编写gulp的配置
// 依赖 var gulp = require('gulp'); // 进行实例化(gulp-load-plugins这个模块后面可以通过$来操作) var $ = require('gulp-load-plugins')(); // open模块 var open = require('open'); var app = { srcPath: 'src/', //源代码路径 devPath: 'build/', //整合后的路径,开发路径 prdPath: 'dist/' //生产环境路径 }; // 创建任务 gulp.task('lib', function () { gulp.src('bower_ponents//.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_ponents//', ['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的使用教程,希望对大家有所帮助,如果大家有任何疑问请给我留言,长沙网络推广会及时回复大家的。在此也非常感谢大家对狼蚁SEO网站的支持!
上一篇:JS实现碰撞检测的方法分析
下一篇:浏览器调试动态js脚本的方法(图解)
编程语言
- 如何快速学会编程 如何快速学会ug编程
- 免费学编程的app 推荐12个免费学编程的好网站
- 电脑怎么编程:电脑怎么编程网咯游戏菜单图标
- 如何写代码新手教学 如何写代码新手教学手机
- 基础编程入门教程视频 基础编程入门教程视频华
- 编程演示:编程演示浦丰投针过程
- 乐高编程加盟 乐高积木编程加盟
- 跟我学plc编程 plc编程自学入门视频教程
- ug编程成航林总 ug编程实战视频
- 孩子学编程的好处和坏处
- 初学者学编程该从哪里开始 新手学编程从哪里入
- 慢走丝编程 慢走丝编程难学吗
- 国内十强少儿编程机构 中国少儿编程机构十强有
- 成人计算机速成培训班 成人计算机速成培训班办
- 孩子学编程网上课程哪家好 儿童学编程比较好的
- 代码编程教学入门软件 代码编程教程