angularjs html压缩,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中标识写入的位置如：

开发环境

//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');

}]);

总结

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