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 相关文章推荐
zShowBox 图片放大展示jquery版 兼容性
Sep 24 Javascript
js常用代码段整理
Nov 30 Javascript
jQuery数组处理代码详解(含实例演示)
Feb 03 Javascript
jQuery原型属性和原型方法详解
Jul 07 Javascript
AngularJS基础 ng-include 指令示例讲解
Aug 01 Javascript
JavaScript 继承详解(五)
Oct 11 Javascript
js字符串操作总结(必看篇)
Nov 22 Javascript
Vue2.0实现组件数据的双向绑定问题
Mar 06 Javascript
微信小程序定义和调用全局变量globalData的实现
Nov 01 Javascript
详解Vue串联过滤器的使用场景
Apr 30 Javascript
基于Echarts图表在div动态切换时不显示的解决方式
Jul 20 Javascript
浅谈克隆 JavaScript
Nov 02 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使用exec shell命令注入的方法讲解
2013/11/12 PHP
php简单实现MVC
2015/02/05 PHP
微信公众号开发之语音消息识别php代码
2016/08/08 PHP
THinkPHP获取客户端IP与IP地址查询的方法
2016/11/14 PHP
基于php(Thinkphp)+jquery 实现ajax多选反选不选删除数据功能
2017/02/24 PHP
PHP生成各种随机验证码的方法总结【附demo源码】
2017/06/05 PHP
PHP检查网站是否宕机的方法示例
2017/07/24 PHP
php常用字符串长度函数strlen()与mb_strlen()用法实例分析
2019/06/25 PHP
PHP实现笛卡尔积算法的实例讲解
2019/12/22 PHP
jquery $.ajax入门应用二
2008/11/19 Javascript
javaScript 利用闭包模拟对象的私有属性
2011/12/29 Javascript
原生js实现给指定元素的后面追加内容
2013/04/10 Javascript
js 鼠标移动显示图片的简单实例
2013/12/25 Javascript
JS小游戏之宇宙战机源码详解
2014/09/25 Javascript
jquery简单的弹出层浮动层代码
2015/04/27 Javascript
javaScript中slice函数用法实例分析
2015/06/08 Javascript
javascript获取重复次数最多的字符
2015/07/08 Javascript
jQuery插件HighCharts绘制2D金字塔图效果示例【附demo源码下载】
2017/03/09 Javascript
详解通过JSON数据使用VUE.JS
2017/05/26 Javascript
对angularJs中2种自定义服务的实例讲解
2018/09/30 Javascript
[04:40]DOTA2-DPC中国联赛1月26日Recap集锦
2021/03/11 DOTA
详解Python中的序列化与反序列化的使用
2015/06/30 Python
Python中基础的socket编程实战攻略
2016/06/01 Python
python中使用 xlwt 操作excel的常见方法与问题
2019/01/13 Python
Python如何转换字符串大小写
2020/06/04 Python
美国第二大连锁书店:Books-A-Million
2017/12/28 全球购物
AT&T Wireless:手机、无限数据计划和配件
2018/06/03 全球购物
工程现场管理求职自荐信
2013/10/02 职场文书
编辑找工作求职信范文
2013/12/16 职场文书
报社实习生自荐信
2014/01/24 职场文书
党员干部承诺书范文
2014/03/25 职场文书
酒店员工培训方案
2014/06/02 职场文书
公司副总经理岗位职责
2014/10/01 职场文书
政府班子四风问题整改措施思想汇报
2014/10/08 职场文书
销售员岗位职责范本
2015/04/11 职场文书
gateway网关接口请求的校验方式
2021/07/15 Java/Android