web项目自动化

主要工具和方法

1. bower管理前端依赖
2. grunt/gulp yo自动构建项目及发布
3. swagger管理api文档实现前后端分离

---

bower

安装 npm install -g bower
生成配置文件bower.json bower init
有配置文件安装依赖 bower install
未配置安装 bower install –save jquery

grunt/gulp

• grunt详情链接
  安装 npm install -g grunt-cli
  创建express项目 express -e xxx
  安装依赖 npm install
  添加grunt npm install grunt –save-dev
  基于grunt的google自动化项目
• yo详情链接
  安装 yo npm install -g yo
  查看generator yo 回车 输入关键字
  安装 generator npm install -g generator-webapp
  到项目文件夹中执行yo webapp即可
• gulp
  全局安装 npm install -g gulp
  局部添加 npm install –save-dev gulp
  在目录下创建一个”gulpfile.js”文件,通过gulp命令运行即可.

var gulp = require('gulp');
var less = require('gulp-less'), //less
    minifycss = require('gulp-minify-css'),
    uglify = require('gulp-uglify'),
    concat = require('gulp-concat'),
    rename = require('gulp-rename'),
    clean = require('gulp-clean');

//less解析
gulp.task('build-less', function(){
    gulp.src('./ja/static/less/lib/s-production.less')
        .pipe(less())
        .pipe(gulp.dest('./ja/static/less/lib/'))
});

// 合并、压缩、重命名css
gulp.task("stylesheets",["build-less"], function() {
    // 注意这里通过数组的方式写入两个地址,仔细看第一个地址是css目录下的全部css文件,第二个地址是css目录下的areaMap.css文件,但是它前面加了!,这个和.gitignore的写法类似,就是排除掉这个文件.
  gulp.src(["./javis/static/build/css/*.css","!./javis/static/build/css/areaMap.css"])
    .pipe(concat("all.css"))
    .pipe(gulp.dest("./javis/static/build/css/"))
    .pipe(rename({ suffix: ".min" }))
    .pipe(minifycss())
    .pipe(gulp.dest("./javis/static/build/css"));
});

swage

参考地址http://swagger.io/