angular1配合gulp和bower的使用教程

一 安装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的使用教程,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!

您可能感兴趣的文章:

  • Angularjs 与 bower安装和使用详解
(0)

相关推荐

  • Angularjs 与 bower安装和使用详解

    bower安装和使用 入门级安装 直接上手 准备工作: 安装nodejs 通过nodejs 安装cnpm 详细过程 1.安装完nodejs 执行node -v 查看版本号 项目需求(建议)4.4.7 2.执行 cnpm -v (淘宝镜像) 查看版本号 3.执行全局命令:cnpm i -g bower 进行全局安装 4.在电脑本地磁盘自定义项目文件夹,通过CMD 执行 e: . cd webApp, (本例项目在e盘下的webApp目录) 5.进入项目目录 执行 bower init 初始化bow

  • 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的使用 初

  • 利用Angular2 + Ionic3开发IOS应用实例教程

    从 Angular1 到 Angular2 Angular2 作为著名前端 MVVM 架构 Angular1 的继承者,从一定程度上说,引领了新一代 Web 前端开发技术的革新.从最新版的 ember.js, react.js, vue.js 中,可以看到这几种技术相互借鉴,取长补短,最终向一种技术方向演进. 组件化技术的崛起 Angular1 也有组件,叫另外一个名字:指令.在 Angular1 中,指令是 DOM 元素紧密结合的一段包含控制逻辑.数据管理的代码.在指令中,我们可以清楚的看到

  • 使用Node.js写一个代码生成器的方法步骤

     背景 第一次接触代码生成器用的是动软代码生成器,数据库设计好之后,一键生成后端 curd代码.之后也用过 CodeSmith , T4.目前市面上也有很多优秀的代码生成器,而且大部分都提供可视化界面操作. 自己写一个的原因是因为要集成到自己写的一个小工具中,而且使用 Node.js 这种动态脚本语言进行编写更加灵活. 原理 代码生成器的原理就是: 数据 + 模板 => 文件 . 数据 一般为数据库的表字段结构. 模板 的语法与使用的模板引擎有关. 使用模板引擎将 数据 和 模板 进行编译,编译

  • gulp教程_从入门到项目中快速上手使用方法

    gulp是什么? gulp 是基于 node 实现 Web 前端自动化开发的工具,利用它能够极大的提高开发效率.在 Web 前端开发工作中有很多"重复工作",比如压缩CSS/JS文件.而这些工作都是有规律的.找到这些规律,并编写 gulp 配置代码,让 gulp 自动执行这些"重复工作" 一.安装gulp与压缩js文件 命令: npm install gulp -g npm install gulp --save-dev 初始化项目package.json的配置:n

  • 基于Node.js的JavaScript项目构建工具gulp的使用教程

    npm install gulp --save-dev 什么是gulp? gulp是新一代的前端项目构建工具,你可以使用gulp及其插件对你的项目代码(less,sass)进行编译,还可以压缩你的js和css代码,甚至压缩你的图片,gulp仅有少量的API,所以非常容易学习. gulp 使用 stream 方式处理内容.Node催生了一批自动化工具,像Bower,Yeoman,Grunt等. gulp和grunt的异同点 易于使用:采用代码优于配置策略,Gulp让简单的事情继续简单,复杂的任务变

  • 前端构建工具之gulp的语法教程

    前言 上一篇说了下gulp的环境搭建以及配置,这一篇说说gulp的语法. 语法说来其实很简单,主要有以下4种: gulp四种语法 现在我们把src下面的index.html文件copy到发布文件夹dist下: 复制单个文件 webstorm下运行 . 点击运行 如此,便有: dist文件夹下更新 复制多个文件 复制到某个特定的文件夹下 每次运行之前都需要更新一下 最终 复制指定文件 排除某个文件 总结 以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如有疑问大家

  • gulp安装以及打包合并的方法教程

    前言 gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器:她不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成:使用她,我们不仅可以很愉快的编写代码,而且大大提高我们的工作效率. 安装.打包合并 1.安装node.js  下载地址: http://nodejs.cn/ 打开node.js 命令行,输入: node  -v ,有版本号,则正确安装. 2.安装淘宝镜像 :命令行输入 : npm install -g cnpm --registry=h

  • 安装使用Mongoose配合Node.js操作MongoDB的基础教程

    安装mongoose 使用express准备一个TestMongoDB项目,命令序列如下: express TestMongoDB cd TestMongoDB npm install 执行完上面的命令后,使用下面的命令安装mongoose: npm install mongoose --save 这个命令会安装mongoose并将其作为项目的依赖,而mongoose依赖的MongoDB driver以及regexp等等模块也会被自动安装. 实例 使用mongoose可以新建数据库.新建集合.对

  • PHP使用php-resque库配合Redis实现MQ消息队列的教程

    消息队列处理后台任务带来的问题 项目中经常会有后台运行任务的需求,比如发送邮件时,因为要连接邮件服务器,往往需要5-10秒甚至更长时间,如果能先给用户一个成功的提示信息,然后在后台慢慢处理发送邮件的操作,显然会有更好的用户体验. 为了实现类似的需求,Web项目中一般的实现方法是使用消息队列(Message Queue),比如MemcacheQ,RabbitMQ等等,都是很著名的产品. 消息队列说白了就是一个最简单的先进先出队列,队列的一个成员就是一段文本.正是因为消息队列实在太简单了,当拿着消息

  • window下homestead开发环境安装详细教程

    一.资源准备 链接:http://pan.baidu.com/s/1mh7qUBe 密码:p4wx 1. virtualbox.box文件放在C盘根目录上. 2. metadata.json文件放在C盘用户目录上.比如我的是 C:\Users\pc 3. Git-2.9.3-64-bit.exe 下载安装,全部默认就好. 4. vagrant_1.8.5.msi 下载安装. 5. VirtualBox-5.1.4-110228-Win.exe 下载安装. 二.简介 1. 什么是vagrant?

随机推荐