Gulp+Jade页面开发自动化

该文章由 leevare 发布于 ,归类于 Javascript

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

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

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

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

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

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

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

使用gulp-jade即可。

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

通过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

如果觉得我的文章对您有用,请您随意打赏。您的支持将鼓励我更加努力创作!

相关文章:

说点什么

avatar
300
  Subscribe  
提醒