angular1配合gulp和bower的使用教程


Posted in Javascript onJanuary 19, 2018

一 安装gulp和bower

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

二 bower使用

  1. 使用bower初始化一个项目: bower init
  2. 填写工程名,描述等等那些东西
  3. 安装angularjs:bower install --save angular
  4. 创建.bowerrc文件(注意window最好用命令行创建)

三 自动化工具gulp的使用

  1. 初始化文件:npm init(一直回车下去就可以)
  2. 在项目里面安装gulp:npm i --save-dev gulp
  3. 安装gulp的依赖插件(只介绍项目中用到的)gulp-clean,gulp-concat,gulp-connect,gulp-cssmin,gulp-imagemin,gulp-less,gulp-load-plugins,gulp-uglif,open(可以和上面安装gulp一样安装)
  4. 创建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_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的使用教程,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript之大字符串的连接的StringBuffer 类
May 08 Javascript
jQuery Ajax提交表单查询获得数据实例代码
Sep 19 Javascript
JS 实现图片直接下载示例代码
Jul 22 Javascript
javascript简单实现命名空间效果
Mar 06 Javascript
js数组常见操作及数组与字符串相互转化实例详解
Nov 10 Javascript
jQuery表单验证简单示例
Oct 17 Javascript
Bootstrap3下拉菜单的实现
Feb 22 Javascript
详解如何在Vue2中实现组件props双向绑定
Mar 29 Javascript
mockjs,json-server一起搭建前端通用的数据模拟框架教程
Dec 18 Javascript
详解js正则表达式验证时间格式xxxx-xx-xx形式
Feb 09 Javascript
vue+vuex+axios实现登录、注册页权限拦截
Mar 09 Javascript
让JavaScript代码更加精简的方法技巧
Jun 01 Javascript
浏览器调试动态js脚本的方法(图解)
Jan 19 #Javascript
Angular实现搜索框及价格上下限功能
Jan 19 #Javascript
vue 插值 v-once,v-text, v-html详解
Jan 19 #Javascript
web前端vue实现插值文本和输出原始html
Jan 19 #Javascript
解决Linux无法正常安装与卸载Node.js的方法
Jan 19 #Javascript
jquery实现点击a链接,跳转之后,该a链接处显示背景色的方法
Jan 18 #jQuery
解决js ajax同步请求造成浏览器假死的问题
Jan 18 #Javascript
You might like
php 过滤器实现代码
2010/08/09 PHP
PHP自定义函数实现格式化秒的方法
2016/09/14 PHP
PHP 超级全局变量相关总结
2020/06/30 PHP
关于js日期转化为毫秒数“节省20%的效率和和节省9个字符“问题
2012/03/01 Javascript
textarea 控制输入字符字节数(示例代码)
2013/12/27 Javascript
Extjs的FileUploadField文件上传出现了两个上传按钮
2014/04/29 Javascript
使用Node.js实现一个简单的FastCGI服务器实例
2014/06/09 Javascript
javascript实现通过表格绘制颜色填充矩形的方法
2015/04/21 Javascript
jfinal与bootstrap的登录跳转实战演习
2015/09/22 Javascript
jQuery无刷新切换主题皮肤实例讲解
2015/10/21 Javascript
JavaScript从0开始构思表情插件
2016/07/26 Javascript
js 基础篇必看(点击事件轮播图的简单实现)
2016/08/20 Javascript
js中class的点击事件没有效果的解决方法
2016/10/13 Javascript
前端构建工具之gulp的语法教程
2017/06/12 Javascript
JavaScript正则表达式校验与递归函数实际应用实例解析
2017/08/04 Javascript
get  post jsonp三种数据交互形式实例详解
2017/08/25 Javascript
解决vue-cli webpack打包开启Gzip 报错问题
2019/07/24 Javascript
JavaScript 反射和属性赋值实例解析
2019/10/28 Javascript
vue 父组件通过$refs获取子组件的值和方法详解
2019/11/07 Javascript
微信小程序自定义弹出模态框禁止底部滚动功能
2020/03/09 Javascript
js对象简介与基本用法示例
2020/03/13 Javascript
Python时间戳与时间字符串互相转换实例代码
2013/11/28 Python
python实现爬虫统计学校BBS男女比例之多线程爬虫(二)
2015/12/31 Python
Python字符串内置函数功能与用法总结
2019/04/16 Python
python基于gevent实现并发下载器代码实例
2019/11/01 Python
使用python matploblib库绘制准确率,损失率折线图
2020/06/16 Python
纽约的奢华内衣店:Journelle
2016/07/29 全球购物
酒店副总岗位职责
2013/12/24 职场文书
2014年元旦联欢会活动策划方案
2014/02/16 职场文书
2014年办公室文员工作总结
2014/11/12 职场文书
事业单位个人总结
2015/02/12 职场文书
红色故事汇观后感
2015/06/18 职场文书
公司员工培训管理制度
2015/08/04 职场文书
2016年国培心得体会及反思
2016/01/13 职场文书
基于Redis延迟队列的实现代码
2021/05/13 Redis
react中的DOM操作实现
2021/06/30 Javascript