Gulp+Jade页面开发自动化

如果要开发一个静态页面的网站，免不了有很多相同的部分，例如头部header，侧边栏aside，还有底部footer等等，如果要实现一个完整的页面开发，每次都要复制这些相同的代码，这样做起来也太机械了，而且效率低下，以后如果某个部分需要改动，每个包含了这些公共部分的代码都要修改，而且找出这些公共的部分也十分费力，给后期维护也造成了巨大的麻烦。

那么，可以使用Jade模板引擎来解决页面代码复用的问题。我们可以抽离出相同的部分作为公共的内容，在特定的页面引用即可，后期修改也只需修改公共模板部分就好了。Jade的详细介绍可以查看Jade的官方网站。

仅仅这些还是不够的，样式最好还是用sass来写，这样也利于样式文件的维护和修改。都8102年了，js当然也最好用es6了，感谢babel给我们带来的极大便利，有这么好的工具，当然要用上了。

前端开发呢，肯定是每次写好一个样式，查看浏览器，然后刷新查看效果。觉得这样还是不够好，最好让它能自动刷新，我修改了代码，它自动就反馈到浏览器上去了，这样开发效率会有大幅提升的。

好了，上面扯了这么多，在代码中怎么实现呢？

可以通过gulp来创建不同的任务，通过启动不同的任务，把上面的一个个的需求分解为gulp中一个个的任务就好了。

借助于一些gulp插件，我们来创建单个任务，首先是编译Jade模板文件。

使用gulp-jade即可。

然后编译scss文件，借助于gulp-sass和gulp-autoprefixer，autoprefixer会帮助我们自动添加浏览器兼容的前缀，这个繁琐的工作让工具来帮我们做就好了。

通过gulp-babel来编译es6文件为浏览器可以执行的js文件。

最后呢，需要起一个服务器环境，来实时监测我们代码的变动，反馈到浏览器中，可以借助与gulp-webserver插件。

上面列举的这些插件具体的使用方式查看他们各自的官方介绍即可，这里不再赘述。

如下gulp任务的实现代码

const gulp = require('gulp'),
  jade = require('gulp-jade'),
  sass = require('gulp-sass'),
  cleanCss = require('gulp-clean-css'),
  autoprefixer = require('gulp-autoprefixer'),
  jshint = require('gulp-jshint'),
  babel = require('gulp-babel'),
  sourcemaps = require('gulp-sourcemaps'),
  concat = require('gulp-concat'),
  uglify = require('gulp-uglify'),
  pump = require('pump'),
  rename = require('gulp-rename'),
  webserver = require('gulp-webserver'),
  clean = require('gulp-clean'),
  errorNotifier = require('gulp-error-notifier')

gulp.task('serve', function () {
  gulp.src('./')
    .pipe(webserver({
      livereload: true,
      open: true,
      directoryListing: false
    }))
})

gulp.task('templates', function () {
  const src = './src/templates/*.jade',
    dist = './dist'

  gulp.src(src)
    .pipe(errorNotifier())
    .pipe(jade())
    .pipe(gulp.dest(dist))
})

gulp.task('style', function () {
  const src = './src/scss/*.scss',
    dist = './dist/css/'

  gulp.src(src)
    .pipe(errorNotifier())
    .pipe(sass())
    .pipe(autoprefixer({
      browsers: ['last 2 versions'],
      cascade: false
    }))
    .pipe(rename({ suffix: '.min' }))
    .pipe(cleanCss({ compatibility: 'ie8' }))
    .pipe(gulp.dest(dist))

})

gulp.task('script', function () {
  const src = './src/js/*.js',
    dist = './dist/js/'

  gulp.src(src)
    .pipe(sourcemaps.init())
    .pipe(babel())
    .pipe(jshint())
    .pipe(jshint.reporter('default'))
    .pipe(concat('main.js'))
    .pipe(rename({ suffix: '.min' }))
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest(dist))
})

gulp.task('compress', function (cb) {
  const src = './src/js/*.js',
    dist = './dist/js/'

  pump([
    gulp.src(src),
    babel(),
    concat('main.js'),
    rename({ suffix: '.min' }),
    uglify(),
    gulp.dest(dist)
  ], cb)
})

gulp.task('clean', function () {
  const target = './dist/*'

  gulp.src(target, { read: false })
    .pipe(clean())
})

gulp.task('build', ['templates', 'style', 'compress'])

gulp.task('watch', function () {
  gulp.watch('./src/templates/*.jade', ['templates'])
  gulp.watch('./src/scss/*.scss', ['style'])
  gulp.watch('./src/js/*.js', ['script'])
})

gulp.task('default', function () {
  gulp.start('templates', 'style', 'script', 'serve', 'watch')
})

具体的自动化脚手架demo，可以参见我的github。