Angular企业级开发(6)-使用Gulp构建和打包前端项目
1.gulp介绍基于流的前端自动化构建工具,利用gulp可以提高前端开发效率,特别是在前后端分离的项目中。使用gulp能完成以下任务:
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.将目录下所有的以 2.执行 3.然后 4.再使用 5.最后输出到当前目录下, 项目构建中需要使用的模块有以下这些: 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名为 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 系列 (一):为什么需要前端构建 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |