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的动态加载、缓存、更新以及复用(一)
Jun 09 Javascript
如何解决ligerUI布局时Center中的Tab高度大小
Nov 24 Javascript
JavaScript模拟push
Mar 06 Javascript
JS判断字符串变量是否含有某个字串的实现方法
Jun 03 Javascript
巧方法 JavaScript获取超链接的绝对URL地址
Jun 14 Javascript
详解微信小程序 相对定位和绝对定位
May 11 Javascript
vue中的$emit 与$on父子组件与兄弟组件的之间通信方式
May 13 Javascript
layui实现点击按钮给table添加一行
Aug 10 Javascript
node实现分片下载的示例代码
Oct 17 Javascript
微信小程序 网络通信实现详解
Jul 23 Javascript
JS实现小星星特效
Dec 24 Javascript
详解javascript脚本何时会被执行
Feb 05 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笔记之:php数组相关函数的使用
2013/04/26 PHP
PHP中创建图像并绘制文字的例子
2014/11/19 PHP
php检测图片主要颜色的方法
2015/07/01 PHP
PHP递归统计系统中代码行数
2019/09/19 PHP
JQuery入门—编写一个简单的JQuery应用案例
2013/01/03 Javascript
js日期时间补零的小例子
2013/03/05 Javascript
javascript同页面多次调用弹出层具体实例代码
2013/08/16 Javascript
jquery中的ajax方法怎样通过JSONP进行远程调用
2014/05/04 Javascript
jQuery中before()方法用法实例
2014/12/25 Javascript
5个最顶级jQuery图表类库插件【jquery插件库】
2016/05/05 Javascript
ashx文件获取$.ajax()方法发送的数据
2016/05/26 Javascript
浅谈如何实现easyui的datebox格式化
2016/06/12 Javascript
Javascript表单特效之十大常用原理性样例代码大总结
2016/07/12 Javascript
JS中Swiper的使用和轮播图效果
2017/08/11 Javascript
JavaScript使用享元模式实现文件上传优化操作示例
2018/08/07 Javascript
vue实现的组件兄弟间通信功能示例
2018/12/04 Javascript
layui问题之渲染数据表格时,仅出现10条数据的解决方法
2019/09/12 Javascript
JS实现横向跑马灯效果代码
2020/04/20 Javascript
利用Python实现颜色色值转换的小工具
2016/10/27 Python
对python For 循环的三种遍历方式解析
2019/02/01 Python
Python实现数值积分方式
2019/11/20 Python
python import 上级目录的导入
2020/11/03 Python
教你使用Canvas处理图片的方法
2017/11/28 HTML / CSS
凯撒娱乐:Caesars Entertainment
2018/02/23 全球购物
20世纪40年代连衣裙和复古服装:The Seamstress Of Bloomsbury
2018/07/24 全球购物
Nike瑞士官网:Nike CH
2021/01/18 全球购物
工程师岗位职责规定
2014/02/26 职场文书
会计员岗位职责
2014/03/15 职场文书
广告词串烧
2014/03/19 职场文书
签约仪式主持词
2014/03/19 职场文书
自我鉴定总结
2014/03/24 职场文书
井冈山红色之旅感想
2014/10/07 职场文书
活动新闻稿范文
2015/07/17 职场文书
python树莓派通过队列实现进程交互的程序分析
2021/07/04 Python
使用Oracle命令进行数据库备份与还原
2021/12/06 Oracle
python数字图像处理之图像自动阈值分割示例
2022/06/28 Python