Angular.js项目中使用gulp实现自动化构建以及压缩打包详解

程序员文章站 2022-05-14 19:23:06

gulp介绍基于流的前端自动化构建工具，利用gulp可以提高前端开发效率，特别是在前后端分离的项目中。使用gulp能完成以下任务：压缩html、css和...

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');
}]);

总结

以上就是这篇文章的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对的支持。

上一篇： JS实现浏览上传文件的代码

下一篇：深入理解angular2启动项目步骤