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的对话框详解与参数
Mar 08 Javascript
js判断IE6/IE7/FF的代码[XMLHttpRequest]
Feb 16 Javascript
S2SH整合JQuery+Ajax实现登录验证功能实现代码
Jan 30 Javascript
弹出最简单的模式化遮罩层的js代码
Dec 04 Javascript
JavaScript实现把rgb颜色转换成16进制颜色的方法
Jun 01 Javascript
基于jQuery实现搜索关键字自动匹配功能
Mar 26 Javascript
每天一篇javascript学习小结(基础知识)
Nov 10 Javascript
jQuery原理系列-常用Dom操作详解
Jun 07 Javascript
jQuery使用each方法与for语句遍历数组示例
Jun 16 Javascript
JS中数组重排序方法
Nov 11 Javascript
Vue Element使用icon图标教程详解(第三方)
Feb 07 Javascript
Vue Element UI + OSS实现上传文件功能
Jul 31 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文本数据库的搜索方法
2006/10/09 PHP
php基础知识:类与对象(4) 范围解析操作符(::)
2006/12/13 PHP
PHP使用curl函数发送Post请求的注意事项
2016/11/26 PHP
PHP如何读取由JavaScript设置的Cookie
2017/03/22 PHP
Javascript中eval函数的使用方法与示例
2007/04/09 Javascript
javascript中的toFixed固定小数位数 简单实例分享
2013/07/12 Javascript
js操作iframe兼容各种主流浏览器示例代码
2013/07/22 Javascript
jQuery中hover方法和toggle方法使用指南
2015/02/27 Javascript
javascript中闭包(Closure)详解
2016/01/06 Javascript
Bootstrap3制作图片轮播效果
2016/05/12 Javascript
JS for循环中i++ 和 ++i的区别介绍
2016/07/20 Javascript
angularjs 实现带查找筛选功能的select下拉框实例
2017/01/11 Javascript
js实现彩色条纹滚动条效果
2017/03/15 Javascript
vue-router相关基础知识及工作原理
2018/03/16 Javascript
JS字典Dictionary类定义与用法示例
2019/02/01 Javascript
[02:24]DOTA2亚洲邀请赛 NAVI战队出场宣传片
2015/02/07 DOTA
[04:03]辉夜杯主赛事 12月25日RECAP精彩回顾
2015/12/26 DOTA
[01:10:48]完美世界DOTA2联赛PWL S2 GXR vs PXG 第一场 11.18
2020/11/18 DOTA
python实现每次处理一个字符的三种方法
2014/10/09 Python
python实现马耳可夫链算法实例分析
2015/05/20 Python
python3使用PyMysql连接mysql数据库实例
2017/02/07 Python
matplotlib作图添加表格实例代码
2018/01/23 Python
python3 爬取图片的实例代码
2018/11/06 Python
浅谈Python_Openpyxl使用(最全总结)
2019/09/05 Python
python NumPy ndarray二维数组 按照行列求平均实例
2019/11/26 Python
解决django接口无法通过ip进行访问的问题
2020/03/27 Python
Python命名空间namespace及作用域原理解析
2020/06/05 Python
python转化excel数字日期为标准日期操作
2020/07/14 Python
了解一下python内建模块collections
2020/09/07 Python
英国护肤品购物网站:Beauty Expert
2016/08/19 全球购物
以太网Ethernet IEEE802.3
2013/08/05 面试题
学校大课间活动方案
2014/01/30 职场文书
领导干部群众路线对照检查材料
2014/11/05 职场文书
2014年学校后勤工作总结
2014/12/06 职场文书
计算机考试作弊检讨书1000字
2015/01/01 职场文书
Spring IOC容器Bean的作用域及生命周期实例
2022/05/30 Java/Android