angular1配合gulp和bower使用
一 安装gulp和bower
gulp安装: npm install -g gulp
bower安装: npm install -g bower
==注:== angularjs的一些包文件我们是通过bower来管理的
二 bower使用
- 使用bower初始化一个项目: bower init
- 填写工程名,描述等等那些东西
- 安装angularjs:bower install --save angular
- 创建.bowerrc文件(注意window最好用命令行创建)
三 自动化工具gulp的使用
- 初始化文件:npm init(一直回车下去就可以)
- 在项目里面安装gulp:npm i --save-dev gulp
- 安装gulp的依赖插件(只介绍项目中用到的)gulp-clean,gulp-concat,gulp-connect,gulp-cssmin,gulp-imagemin,gulp-less,gulp-load-plugins,gulp-uglify,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_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使用相关推荐
- 简介Gulp, Grunt, Bower, 和 Npm 对Visual Studio的支持
[原文发表地址]Introducing Gulp, Grunt, Bower, and npm support for Visual Studio Web 开发,特别是前端 Web 开发,正迅速变得像 ...
- gulp,grunt,bower,feoman,fis 简单说明
一.grunt说明 (1)grunt网址: https://www.gruntjs.net/getting-started (2)说明: 自动化.对于需要反复重复的任务,例如压缩(minificati ...
- Gulp和Webpack对比
在现在的前端开发中,前后端分离.模块化开发.版本控制.文件合并与压缩.mock数据等等一些原本后端的思想开始逐渐渗透到"大前端"的开发中.前端开发过程越来越繁琐,当今越来越多的网站 ...
- GULP和Webpack比较
转载自https://www.cnblogs.com/RuMengkai/p/6667321.html, 作者:茹孟凯, Gulp和Webpack对比 在现在的前端开发中,前后端分离.模块化开发.版本 ...
- gulp plugins 插件介绍
原文:http://ju.outofmemory.cn/entry/103253 鸟窝 2014-11-28 3020 阅读 gulp Gulp是一个构建工具, 功能类似grunt, 以及Java生态 ...
- Webpack 4 和单页应用入门
写在开头 先说说为什么要写这篇文章,最初的原因是组里的小朋友们看了 webpack 文档后,表情都是这样的:摘自 webpack 一篇文档的评论区) 和这样的: 是的,即使是外国佬也在吐槽这文档不是人 ...
- 前端build工具介绍
即使对于一些经验丰富的开发者来说,诸多的前端工具还是会让他们感到头痛.解决这个问题的最好办法,就是在概念上理解他们的工作方式,已经他们之间相互配合的方式. 不要被各种专业名词唬住 Node, NPM, ...
- java web开发初学_2018年学习Web开发的绝对初学者指南
java web开发初学 This post was originally published on Coder-Coder.com. 该帖子最初发布在Coder-Coder.com上 . If yo ...
- 前端工程师成长之多读好书
1 引言 乱七八糟的书看了很多,有一本讲JavaScript的印象特别深开篇说的是"JavaScript是Java的脚本语言",但还是看完了,最后忘了书名. 下面列的这些都是看过后 ...
最新文章
- HDFS以IO流的形式上传和下载文件案例
- Office 365用户现可分享含有效期的OneDrive文件链接
- STL系列:map和unordered_map
- 以mips为单位衡量微型计算机的性能,2016计算机二级《MS Office》选择题专项训练...
- 【活动】畅想云端加油站,赢iPad
- DELPHI怎样编写COM组件
- Servlet相关(request域转发、重定向、刷新头)(session域)
- vs工具箱里面没有工具怎么办_装机技巧系列(一):用U盘制作自己的PE工具箱...
- 苹果iPad Pro将转向OLED屏幕 首款明年下半年推出
- OpenProj打开不了或者提示”Failed to load Java VM Library”的错误的解决方案
- SSD目标检测(Single Shot MultiBox Detector)(一)
- C++ 语言学习入门--类
- 一、RAID磁盘阵列介绍
- 机器学习笔记(十六):多项式回归、拟合程度、模型泛化
- (JAVA)	相反数
- 我这大半年——求职理论篇
- 网易我的世界java进不去_网易我的世界端游怎么进不去
- 创造与魔法282服务器哪天维护,创造与魔法新版本开启时间详细介绍
- Swordfish -- SOA运行时框架
- 数电4_2——常用的组合逻辑电路(1)编码器
热门文章
- c语言运动会成绩统计报告,C语言程序设计运动会成绩统计系统1研究报告.doc
- 有计算机二级证书当兵有好处吗,大学生拿到这个证书可享受的福利,当兵有什么不一样?...
- oracle的delete语句加速,Oracle delete语句调优一例
- 开源医学图像数据集(资源整合)
- FPGA之道(48)跨时钟域问题
- FPGA设计思想之“逻辑复制”
- 【 MATLAB 】any 函数介绍(确定是否有任意数组元素非零)
- SQL Server中临时表与表变量的区别
- springclould feign客户端添加全局参数
- MapReduce 概述