Angular.js项目中使用gulp实现自动化构建以及压缩打包详解
gulp介绍
基于流的前端自动化构建工具，利用gulp可以提高前端开发效率，特别是在前后端分离的项目中。使用gulp能完成以下任务：
- 压缩html、css和js
- 编译less或sass等
- 压缩图片
- 启动本地静态服务器
- 其他
目标
- 一键安装项目所有的依赖模块
- 一键安装项目所有的依赖库
- 代码检查确保严格语法正确
- 能将angularjs的html装换成js模块并且压缩到js文件中
- 将所有css文件合并压缩
- 将所有的js文件合并压缩
- 动态引入资源文件
- 拥有开发环境和生产环境两种打包方式
工具
- npm基于node的包管理器
- gulp基于node文件流的构建系统
- bower是Web开发中的一个前端文件包管理器
实现过程
1、一键安装项目所有的依赖模块
创建项目使用命令(项目目录下)
npm init
//生成package.json
{
"name": "leason",
"version": "1.0.0",
"description": "test for angular and gulp and unit testing",
"main": "gulpfile.js",
"dependencies": {
},
"devDependencies": {
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
},
"keywords": [
"leason"
],
"author": "leason",
"license": "ISC",
"bugs": {
},
}
npm安装依赖模块采用命令
npm install xxx --save //保存到dependencies（生产） npm install xxx --save-dev //保存到devDependencies（开发）
package.json中保存相应模块，项目重新部署只需要命令
npm install //安装package中所有模块
一键安装项目所有的依赖模块使用bower管理器，用法和npm类似
2、语法检查
npm install gulp-jshint --save-dev
//代码语法检查命令--gulp jshint
var jshint = require('gulp-jshint'); //代码检查
gulp.task('jshint', function () {
return gulp.src(paths.js)
.pipe(jshint())
.pipe(jshint.reporter('default'));
});
转换html为js模块
npm install gulp-angular-templatecache --save-dev
//合并html模板命令--gulp template
var templateCache = require('gulp-angular-templatecache');
gulp.task('template', function () {
return gulp.src(['./templates/**/*.html','./templates/*.html'])
.pipe(templateCache({module: 'templates'}))
.pipe(gulp.dest('./js'))
});
3、将所有css文件合并压缩
npm install gulp-cssmin --save-dev
//合并压缩css命令--gulp deployCSS
var cssmin = require('gulp-cssmin');
gulp.task('deployCSS', function() {
return gulp.src(paths.css)
.pipe(cssmin())
.pipe(concat('all.css'))
.pipe(gulp.dest('./build'));
});
4、将所有js文件合并压缩
npm install gulp-uglify --save-dev //压缩 npm install gulp-concat --save-dev //合并 npm install gulp-sourcemapsy --save-dev //处理 JavaScript 时生成 SourceMap npm install gulp-strip-debug --save-dev //去除打印
//测试生产两种js压缩命令--生产gulp js --prod测试gulp js --dev
gulp.task('js', function(type) {
console.log(type);
if (type == 'dev') { // dev
return gulp.src(paths.js)
.pipe(concat('all.js'))
.pipe(gulp.dest('./build'));
} else { // prod
return gulp.src(paths.js)
.pipe(sourcemaps.init())
.pipe(stripDebug())
.pipe(uglify())
.pipe(concat('all.min.js'))
.pipe(sourcemaps.write())
.pipe(gulp.dest('./build'));
}
});
5、根据现有文件想index中引入
npm install gulp-inject --save-dev
index.html中标识写入的位置如：
<!doctype html> <html> <head> <meta charset="utf-8"> <title ng-bind="headTitle"></title> <meta content="text/html; charset=utf-8" http-equiv="Content-Type"/> <!-- bower:css --> <!-- endinject --> <!-- inject:css --> <link rel="stylesheet" href="build/all.css" rel="external nofollow" > <!-- endinject --> <!-- bower:js --> <!-- endinject --> <!-- inject:js --> <script src="build/all.min.js"></script> <!-- endinject --> </head> <body ng-app="starter"> <div ui-view></div> </body> </html>
开发环境
//dev资源引用命令--gulp devIndex
gulp.task('devIndex', ['clean', 'jshint'], function () {
// It's not necessary to read the files (will speed up things), we're only after their paths:
return gulp.src('./index.html')
.pipe(inject(gulp.src(paths.js, {read: false}), {relative: true}))
.pipe(inject(gulp.src(paths.css, {read: false}), {relative: true}))
// .pipe(inject(gulp.src(bowerFiles(), {read: false}), {name: 'bower', relative: true}))
.pipe(gulp.dest('./'));
});
生产环境
//生产环境资源引用命令--gulp deployIndex
gulp.task('deployIndex', ['clean', 'jshint', 'template', 'js', 'deployCSS'], function () {
// It's not necessary to read the files (will speed up things), we're only after their paths:
return gulp.src('./index.html')
.pipe(inject(gulp.src(paths.buildjs, {read: false}), {relative: true}))
.pipe(inject(gulp.src(paths.buildcss, {read: false}), {relative: true}))
// .pipe(inject(gulp.src(bowerFiles(), {read: false}), {name: 'bower', relative: true}))
.pipe(gulp.dest('./'));
});
注意点
代码混淆过会使angular的依赖注入无法识别，所以代码编写的过程中要使用严格依赖的写法。如
angularApp.config(['$routeProvider','$stateProvider','$urlRouterProvider',function($routeProvider,$stateProvider,$urlRouterProvider) {
$stateProvider
.state('sidebar', {
url: '/sidebar',
// abstract: true,
templateUrl: 'templates/sidebar.html',
controller: 'sidebarCtrl'
})
$urlRouterProvider.otherwise('/sidebar/tab1');
}]);
总结
以上就是这篇文章的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对我们的支持。
相关推荐
-
前端构建工具之gulp的配置与搭建详解
前言 在如今的前端开发中,已经不再是一些静态文件了. 对于很多Web App来说,前端代码甚至比后端更加复杂,更加难以管理,这主要来源于一下几个方面: 1.许多第三方库的依赖需要自动运行 2.独立的前端测试需要自动运行 3.代码需要发布时打包 一.为什么要使用gulp? 在我们的工作流程里,应该尽量减少重复的工作,很多任务都可以自动去执行,比如一些相关文件的操作,自动监视一些文件的变化,发生变化以后,就去执行事先设计好的任务. 说了这么多,那么gulp到底能做什么? a.创建项目工程 b.压缩各
-
前端构建工具之gulp的语法教程
前言 上一篇说了下gulp的环境搭建以及配置,这一篇说说gulp的语法. 语法说来其实很简单,主要有以下4种: gulp四种语法 现在我们把src下面的index.html文件copy到发布文件夹dist下: 复制单个文件 webstorm下运行 . 点击运行 如此,便有: dist文件夹下更新 复制多个文件 复制到某个特定的文件夹下 每次运行之前都需要更新一下 最终 复制指定文件 排除某个文件 总结 以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如有疑问大家
-
详解前端构建工具gulpjs的使用介绍及技巧
gulpjs是一个前端构建工具,与gruntjs相比,gulpjs无需写一大堆繁杂的配置参数,API也非常简单,学习起来很容易,而且gulpjs使用的是nodejs中stream来读取和操作数据,其速度更快.如果你还没有使用过前端构建工具,或者觉得gruntjs太难用的话,那就尝试一下gulp吧. 1.gulp的安装 首先确保你已经正确安装了nodejs环境.然后以全局方式安装gulp: npm install -g gulp 全局安装gulp后,还需要在每个要使用gulp的项目中都单独安装一次
-
Angular.js项目中使用gulp实现自动化构建以及压缩打包详解
gulp介绍 基于流的前端自动化构建工具,利用gulp可以提高前端开发效率,特别是在前后端分离的项目中.使用gulp能完成以下任务: 压缩html.css和js 编译less或sass等 压缩图片 启动本地静态服务器 其他 目标 一键安装项目所有的依赖模块 一键安装项目所有的依赖库 代码检查确保严格语法正确 能将angularjs的html装换成js模块并且压缩到js文件中 将所有css文件合并压缩 将所有的js文件合并压缩 动态引入资源文件 拥有开发环境和生产环境两种打包方式 工具 npm基于
-
对Django项目中的ORM映射与模糊查询的使用详解
ORM映射 什么是ORM映射?在笔者认为就是对SQL语句的封装,所写语句与SQL对应语句含义相同,使开发更加简单方便,不过也是存在弊端的,使程序运行效率下降.例如: UserInfo.objects.get(id=2) 等于 select * from user_userinfo where id=2 修改管理器(models.py) 导入新的包:from django.db import models 进行模糊查询 开始进行查找前我们先来认识filter()方法. 这是一个过滤器方法用于过滤掉
-
React项目中axios的封装与API接口的管理详解
目录 前言 安装 引入 环境的切换 请求拦截 响应拦截 api的统一管理 总结 前言 在react项目中,和后台交互获取数据这块,我们通常使用的是axios库,它是基于promise的http库,可运行在浏览器端和node.js中.他有很多优秀的特性,例如拦截请求和响应.取消请求.转换json.客户端防御XSRF等.如果还对axios不了解的,可以移步axios文档. 安装 //使用npm安装 npm install axios; //使用yarn安装 yarn add axios 引入 在项目
-
一些php项目中比较通用的php自建函数的详解
以下一些php函数是我们it动力最常用的项目开发函数,这些函数还算是在比较多的项目中使用到的,也是比较通用的.1.请求接口的处理函数 复制代码 代码如下: /** * curl访问程序接口 * @param string * @return array */ function getCurlDate($url, $datas, $key) { $datas['time'] = $_SERVER['REQUEST_TIME'] + 300; $post_data['p
-
项目中如何使用axios过滤多次重复请求详解
目录 一.前言: 这个情况下,我们通常的做法有两种: 二.CancelToken类 最终效果 总结 一.前言: 我们在web应用开发过程当中,经常会遇到一个时刻发起了多个请求的场景 这个情况下,我们通常的做法有两种: 可以在请求时show一个loading,阻止用户操作. 或者人为加个变量,做一个请求的节流 我们的项目中,目前大部分情况也是采用以上两种方式做的.今天来介绍一个新的方式. 二.CancelToken类 我们之前实例化一个Promise,这个对象是否成功与否,是无法在函数外部决定的,
-
JS面试中你不知道的call apply bind方法及使用场景详解
目录 面试 三者区别 call apply. bind 总结 应用场景 简单实现 call apply bind 面试 面试官 :说一下 call apply bind 的三者区别吧? 我:啊.....这. 三者区别 call 我们先来看看 call call 函数接收两个参数 @params1 需要指向this @params2 需要携带的参数 就拿这段代码 来说 我调用 foo 函数 的时候 想去 执行obj 中的 eat函数 怎么办? 默认 我的 foo 里面什么页面有 怎么可能会打印 吃
-
js项目中双向数据绑定的简单实现方法
目录 前言 发布订阅者模式 结果 调用 总结 前言 双向数据绑定 指的是当对象的属性发生变化时能够同时改变对应的UI,反之亦然.换句话说,如果我们有一个user对象,这个对象有一个name属性,无论何时你对user.name设置了一个新值,UI也会展示这个新的值.同样的,如果UI包含一个用于数据用户名字的输入框,输入一个新值也会导致user对象的name属性发生相应的改变. 许多流行的javascript框架,像Ember.js,Angular.js或者KnockoutJS都会把双向数据绑定作为
-
ejsExcel模板在Vue.js项目中的实际运用
什么是ejsExcel? ejsExcel是一款国人开发的.在Node.js应用程序中使用我们预先设置好的Excel模板导出Excel表格的模板引擎. Excel模板 导出后 Github地址 ejsExcel 如果因为众(ni)所(dong)周(de)知的原因打不开github,没有关系,它的语法很简单,都是一些对Excel模板格式的定义: 这篇文章是我在工作中因为业务需要,用到了ejsExcel这个模板引擎,觉得很不错,但是坑也不少.而网上相关的资料又太少,所以趁此机会总结了一下我的踩坑经历
-
Vue.js + Nuxt.js 项目中使用 Vee-validate 表单校验
vee-validate 是为 Vue.js 量身打造的表单校验框架,允许您校验输入的内容并显示对应的错误提示信息.它内置了很多常见的校验规则,可以组合使用多种校验规则,大部分场景只需要配置就能实现开箱即用,还支持自定义正则表达式.而且支持 40 多种语言,对本地化.多语言支持非常友好. 国内饿了么团队开源项目 Element UI 就用到了 vee-validate . vee-validate 官网:https://baianat.github.io/vee-validate/ 1. 安装
-
Vue.js项目中管理每个页面的头部标签的两种方法
在 Vue SPA 应用中,如果想要修改 HTML 的头部标签,如页面的 title ,我们只能去修改 index.html 模板文件,但是这个是全局的修改,如何为每个页面都设置不一样的 title 呢?下面介绍两种方法. 使用router.meta 在路由里面配置每个路由的地址: routes: [ { /* (首页)默认路由地址 */ path: '/', name: 'Entrance', component: Entrance, meta: { title: '首页入口' } }, {