使用gulp 创建一个自动化jquery项目

有时候公司会遇到小的前端项目,不需要前后端分离,要求兼容性,这部分内容一如既往是jquery的天下。但是用惯了vue和react的自动化,再回过头去可就真是难受了。 不能用less,不能用es6,不能引用公共的头部/底部等,不能热更新,真是费死劲了。所以用gulp解决一下这个问题。

主要设计思路

除了需要解决面的问题,还需要考虑到实际项目中的问题。实际项目中,这种jquery的前端项目做完,基本上就是交给后端套用,当前端再次要修改的时候,基本上已经脱离当前的状态。 所以,样式表压缩和js的压缩基本不用考虑。gulp对图片的压缩,效果也达不到预期的效果,编译起来也比较耗时间,所以直接把img放在dist中比较合理些。同样的问题适用于各种插件, 本身没必要编译。

所以,dist中只有部分是编译内容,部分是直接放进去的。

项目目录介绍

  • dist: 编译后输出文件目录
  • dist/css:编译后的css文件
  • dist/img:并没有编译img,因为图片太多速度会变慢,而且对图片的编译只是进行压缩,但用gulp压缩效果并不理想。
  • dist/js:编译后的js
  • dist/libs:引用的各种框架/插件的目录
  • dist/index.html:编译后的html页面
  • src:开发环境页面
  • src/include:公共模版目录
  • src/js:开发环境下的js文件
  • src/less:less文件
  • src/pages:页面文件
  • gulpfile.js:gulp配置文件

gulp 配置文件

let gulp = require('gulp')
let fileinclude = require('gulp-file-include')
let less = require('gulp-less')
let clean = require('gulp-clean')
let livereload = require('gulp-livereload')
let babel = require('gulp-babel')


// 清除文件
gulp.task('clean', done => {
    gulp.src('./dist/**/*.html', {read: false})
        .pipe(clean())

    gulp.src('./dist/css/*.css', {read: false})
        .pipe(clean())

    done()
})
// 模版文件合并
gulp.task('fileinclude', done => {
    gulp.src('./src/pages/**/*.html')
        .pipe(fileinclude({
            prefix: '@@',
            basepath: '@file'
        }))
        .pipe(gulp.dest('./dist'))
    done()
})
// 编译less
gulp.task('compileLess', done => {
    gulp.src('./src/less/*.less')
        .pipe(less())
        .pipe(gulp.dest('./dist/css'))
    done()
})
// 编译es6
gulp.task('babel', done => {
    gulp.src(['./src/js/main.js'])
        .pipe(babel({ presets: ['es2015'] }))
        .pipe(gulp.dest('./dist/js'))
        .pipe(livereload())
    done()
})

// 编译es6
gulp.task('watch', done => {
    livereload.listen();
    gulp.watch('./src',  gulp.series('clean', 'fileinclude','compileLess', 'babel'))
    done()
})

gulp.task('default', gulp.series('clean', 'fileinclude','compileLess', 'babel', 'watch'))

package.json文件

{
  "name": "webServer",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.2.2",
    "@babel/preset-env": "^7.2.3",
    "babel-core": "^6.26.3",
    "gulp": "^4.0.0",
    "gulp-autoprefixer": "^6.0.0",
    "gulp-babel": "^7.0.1",
    "gulp-clean": "^0.4.0",
    "gulp-file-include": "^2.0.1",
    "gulp-imagemin": "^5.0.3",
    "gulp-less": "^4.0.1",
    "gulp-livereload": "^4.0.1"
  },
  "dependencies": {
    "babel-cli": "^6.26.0",
    "babel-preset-es2015": "^6.24.1"
  }
}

gulp的热更新,需要chrome的一个LiveReload插件

随机浏览