前言
最近在做一个PC端的项目，由于项目需要兼容到IE8，所以从技术选型上采取了公司之前一直沿用的前端基于gulp后端基于freemarker的模式来进行开发。
那么gulp+freemarker这种开发模式的流程到底是怎样的呢？我这边就来简单的分析一下。
一、前端基于gulp
前端技术栈：
- gulp
- jquery
- ajax
- less...
前端项目结构：
├──README.md项目介绍 ├──src源码目录 │├──common ├──less公共样式 ├──js公共js ├──plugins插件 项目公共文件 │├──img图片 │├──jsjs │├──less样式 ├──.eslintrc.jseslint规则配置 ├──package.json工程文件 ├──gulpfile.js配置文件 ├──server.js本地服务 |
从目录来看，非常简单，我这边就主要来分析一下gulpfile.js和server.js
gulpfile.js
熟悉gulp的同学都知道，一般我们会将整个项目两种环境来调用，即开发环境和生产环境
开发环境的配置：
vargulp=require("gulp"), less=require("gulp-less"), clean=require("gulp-clean")， header=require("gulp-header")； /** *less编译 *@return{[type]}[description] *开发环境调用 */ gulp.task("less",["cleanCss"],function(){ gulp.src(['src/less/*.less','src/common/less/*.less']) .pipe(plumber({ errorHandler:errorHandler })) .pipe(less()) .pipe(addHeader()) .pipe(gulp.dest('dist/css')); }); /** *js编译 *@return{[type]}[description] *开发环境调用 */ gulp.task('js',['cleanJs'],function(){ gulp.src(['src/js/*.js','src/common/js/*.js']) .pipe(plumber({ errorHandler:errorHandler })) .pipe(addHeader()) .pipe(gulp.dest('dist/js')); gulp.src('src/common/plugins/*.js') .pipe(gulp.dest("dist/js/plugins")) }) /** *img输出 *@return{[type]}[description] *开发环境调用 */ gulp.task("imgOutput",["cleanImg"],function(){ gulp.src('src/img/**/*.*') .pipe(gulp.dest("dist/img")) }) |
简析上述代码：
在开发环境中我们需要对我们项目的src下的业务less、js、img和common下的公共less、js、img进行编译打包，那么我们就需要借助gulp.task()这个方法来建立一个编译任务。创建完任务以后，我们就需要通过gulp.src()来指向我们需要编译的文件
最后我们再通过gulp.pipe()来创建一个又一个我们需要的管道，如
gulp.pipe(plumber({errorHandler:errorHandler}))
functionerrorHandler(e){ //控制台发声,错误时beep一下 gutil.beep(); gutil.log(e); } |
编译的时候控制台打印错误信息。
gulp.pipe(addHeader())
/** *在文件头部添加时间戳等信息 */ varaddHeader=function(){ returnheader(banner,{ pkg:config, moment:moment }); }; |
编译以后在文件的头部加上编译时间
gulp.pipe(gulp.dest('dist/js'))
将编译后的文件输出到dist目录下
生产环境的配置：
vargulp=require("gulp"), less=require("gulp-cssmin"), clean=require("gulp-uglify"); header=require("gulp-header") /** *cssbuild *@return{[type]}[description] *正式环境调用 */ gulp.task("cssmin",["cleanCss"],function(){ gulp.src('src/common/less/all.base.less') .pipe(less()) .pipe(cssmin()) .pipe(rename({ suffix:'.min' })) .pipe(addHeader()) .pipe(gulp.dest("dist/css")); gulp.src('src/less/*.less') .pipe(less()) .pipe(cssmin()) .pipe(addHeader()) .pipe(gulp.dest("dist/css")); }); /** *js编译 *@return{[type]}[description] *正式环境调用 */ gulp.task('jsmin',['cleanJs'],function(){ gulp.src(['src/js/**/*.js','src/common/js/**/*.js']) .pipe(plumber({ errorHandler:errorHandler })) .pipe(uglify()) .pipe(addHeader()) .pipe(gulp.dest('dist/js')); gulp.src('src/common/plugins/**/*.js') .pipe(uglify({ mangle:true })) .pipe(addHeader()) .pipe(gulp.dest("dist/js/plugins")) }) |
关于生产环境的配置其实跟上述的开发环境配置原理差不多，区别将在于生产环境中我们需要借助gulp-cssmin和gulp-uglify将css和js都进行压缩，缩小文件的体积。
这里提一下cleancss和cleanjs的意思，其实就是在我们每一次编译打包的时候将原来已经打包生成css和js都清理调，这样保证我们每次编译打包的代码都是最新的。
gulp.task("cleanCss",function(){ returngulp.src('dist/css',{ read:false }).pipe(clean()); }); gulp.task("cleanJs",function(){ returngulp.src('dist/js',{ read:false }).pipe(clean()); }); gulp.task("cleanImg",function(){ returngulp.src('dist/img',{ read:false }).pipe(clean()); }); |
开发环境监听
gulp.task("watch",function(){ livereload.listen(); //调用gulp-watch插件实现编译有改动的LESS文件 gulp.watch(['src/less/*.less','src/common/less/*.less'],function(file){ gulp.src(file.path) .pipe(plumber({ errorHandler:errorHandler })) .pipe(less()) .pipe(addHeader()) .pipe(gulp.dest('dist/css')); }); gulp.watch(['src/js/**/*.js','src/common/js/**/*.js'],function(file){ gulp.src(file.path) .pipe(gulp.dest("dist/js")) }); //监听图片改动 gulp.watch('src/img/**/*.*',function(file){ gulp.src(file.path) .pipe(gulp.dest("dist/img")) }) //监听有变化的css,js,ftl文件，自动刷新页面 gulp.watch(['dist/**/*.css','dist/**/*.js',ftlPath]).on('change',livereload.changed); }); |
在开发项目的时候我们需要借助gulp.watch()来实时的监听项目中代码的改动，并且通过gulp-livereload这个插件来实时的刷新我们的页面，以提高我们的开发效率。
说完gulpfile.js后我们再来分析一下server.js
server.js
constpath=require('path'), express=require('express'), proxy=require("express-http-proxy"), compress=require('compression'), app=express(), fs=require('fs'), config=require('./package.json'), projectName=config.name, port=process.env.PORT||'9091' //GZIP压缩 app.use(compress()); //设置响应头 app.use(function(req,res,next){ res.header('X-Powered-By','Express'); res.header('Access-Control-Allow-Origin','*'); next(); }) //当前静态项目的资源访问 app.use('/'+projectName,express.static('dist')); app.use('/html',express.static('src/pages')); //静态服务器监听 app.listen(port,'0.0.0.0',function(){ console.log('staticserverrunningat'+port) }) |
这里我们通过node中express框架来为我们搭建本地服务，这里重点提一下静态资源项目的访问
通过app.use()方法传入两个参数，其中projectName代表的是我们在package.json中定义项目名称,如下phip_ehr
{ "name":"phip_ehr", "version":"1.0.0", "description":"", "main":"index.js", "scripts":{ "start":"gulp&&gulpwatch", "build":"NODE_ENV=productiongulpbuild", "server":"nodeserver.js" } |
第二个参数express.static('dist')意思是将我们的服务代理到编译打包后的dist文件下如：http://192.168.128.68:9091/phip_ehr/js/**.js
这样以来我们将可以轻松的获取到整个项目下的所有静态了。
上文内容不用于商业目的，如涉及知识产权问题，请权利人联系博为峰小编(021-64471599-8017)，我们将立即处理。
