Angular企业级开发(6)-使用Gulp构建和打包前端项目

1.gulp介绍

基于流的前端自动化构建工具,利用gulp可以提高前端开发效率,特别是在前后端分离的项目中。使用gulp能完成以下任务:

  • 压缩html、css和js
  • 编译less或sass等
  • 压缩图片
  • 启动本地静态服务器
  • 其他

2.gulp构建

前端构建流程:

开发->分析->测试->编译->发布部署

一段简单的基于gulp的项目构建代码,gulpfile.js内容如下所示:

gulp.task('default',function(){    
return gulp
        .src("**/*.js")
        .pipe(jshint())
        .pipe(concat())
        .pipe(uglify())
        .pipe(gulp.dest('./build/'))        
})

上面gulp配置完成的内容是:

1.将目录下所有的以.js结尾的文件

2.执行jshint代码检查

3.然后concat合并为一个文件,

4.再使用uglify对文件进行压缩,

5.最后输出到当前目录下,build文件夹中。

项目构建中需要使用的模块有以下这些:

var gulp = require("gulp");
//connect静态服务器
var connect = require("gulp-connect");


// 合并文件模块
var concat = require('gulp-concat');

//less编译模块
var less = require('gulp-less');

//压缩js
var uglify = require('gulp-uglify');
//压缩css
var minifyCss = require('gulp-minify-css');
//压缩html
var minifyHtml = require('gulp-minify-html');

//项目中需要将.less文件重命名为.css
var rename = require('gulp-rename');

//jshint检查js静态语法检查
var jshint = require('gulp-jshint');

3.gulp打包

因为项目中使用bower进行类库的管理,所以在项目打包的过程,需要从bower_components文件夹中就项目实际使用的js和css文件复制发布文件夹中。在gulpfile.js中有一个task名为vendor,主要任务就是将项目中实际使用的js和css复制到发布文件夹中。我们项目发布文件夹名字为dist。task代码如下:

gulp.task('vendor', function () {

    gulp.src([
        'app/assets/bower_components/ui-select/dist/select.min.css',
        'app/assets/bower_components/toastr/toastr.min.css',
        'app/assets/bower_components/angular-tour/dist/angular-tour.css',
        'app/assets/bower_components/jquery/jquery.min.js',
        'app/assets/bower_components/angular/angular.min.js',
        'app/assets/bower_components/angular-cookies/angular-cookies.min.js',
        'app/assets/bower_components/angular-messages/angular-messages.min.js',
        'app/assets/bower_components/angular-animate/angular-animate.min.js ',
        'app/assets/bower_components/bootstrap/dist/js/bootstrap.min.js',
        'app/assets/bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js',
        'app/assets/bower_components/angular-ui-router/release/angular-ui-router.min.js',
        'app/assets/bower_components/angular-sanitize/angular-sanitize.min.js',
        'app/assets/bower_components/ui-select/dist/select.js',
        'app/assets/bower_components/oclazyload/dist/oclazyload.min.js',
        'app/assets/bower_components/angular-smart-table/dist/smart-table.min.js',
        'app/assets/bower_components/angular-file-upload/dist/angular-file-upload.min.js',
        'app/assets/bower_components/echarts/dist/echarts.min.js',
        'app/assets/bower_components/angular-tour/dist/angular-tour-tpls.js',
        'app/assets/bower_components/toastr/toastr.min.js'
    ], { base: 'app' })
        .pipe(gulp.dest("dist"));
});

开发的源代码 vs 发布的代码文件文件大小对比

4.参考内容

http://www.gulpjs.com.cn/

前端构建工具gulp使用

前端构建大法 Gulp 系列 (一):为什么需要前端构建

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏运维小白

克隆虚拟机的注意点

在虚拟机中的 “管理”——>克隆虚拟机 更改虚拟机的IP,配置文件为 /etc/sysconfig/network-scripts/ifcfg-ens32 中 ...

20690
来自专栏Aloys的开发之路

Unix/Linux操作系统中如何在sqlplus/rman中使用方向键

默认情况下在Unix/Linux中使用Oracle的sqlplus/rman是无法使用↑↓←→几个方向键进行操作的,要想达到Windows下使用sqlplus/...

21860
来自专栏静下来

windows服务器iis7.5安装多个php版本切换设置

因为某个网站程序的配置是在php5.3上面运行的,不兼容我现在的php5.5.所以就只能再安装个5.3的了。 在安装过程中,忘记截图了。。。就直接写吧。 准备工...

1.2K40
来自专栏CaiRui

Shell中的$..

$0 这个程式的执行名字 $n 这个程式的第n个参数值,n=1..9 $* 这个程式的所有参数,此选项参数可超过9个。 $# 这个程式的参数个数 $$ 这个程式...

34990
来自专栏xingoo, 一个梦想做发明家的程序员

公司内网,无法使用yum在线下载,肿么办?

1 配置上网代理   编辑/etc/yum.conf,增加如下属性: proxy=你的代理地址 proxy_user=你的用户名 proxy_passwor...

341100
来自专栏史上最简单的Spring Cloud教程

Openresty最佳案例 | 第6篇:OpenResty连接Mysql

centos 安装mysl Centos系统下安装mysql,先下载mysql-community-release-el7-5.noarch.rpm,然后通过y...

44590
来自专栏西安-晁州

nodejs应用离线安装部署、卸载

公司写的文档,直接粘贴过来了: 本文档提供node应用一键安装、部署、卸载说明,包含对应脚本文件 默认版本: 1、nodejs:v6.11.2.linux-...

38500
来自专栏运维技术迷

HTTP响应可视化测试工具-httpstat

httpstat是一款可以测试http状态的可视化工具,通过这个工具可以看出来http响应信息。包括dns解析、tcp连接等信息,httpstat一共有gola...

40780
来自专栏不想当开发的产品不是好测试

pip is configured with locations that require TLS/SSL, however the ssl module in Python is not avail

# 背景 安装pip后发现执行pip install pytest,提示下面错误 pip is configured with locations that r...

1.3K110
来自专栏编程思想之路

Android6.0之修改或者查看系统属性值

系统属性值存在于system.prop文件中,也有一些存在于settings中 1,查看settingsprovider中的值的方法 命令为adb shell ...

47950

扫码关注云+社区

领取腾讯云代金券