none

0%

Gulp

发表于

Gulp

一个前端自动化工具，和 grunt 类似，使用的是流(stream)的方式，构建时会将文件加载到内存再进行进一步操作，可以异步构建

相关插件

  • gulp-autoprefixer 添加浏览器 CSS3 前缀
  • gulp-clean-css 压缩 CSS
  • gulp-uglify 压缩 js
  • gulp-rename 重命名
  • gulp-livereload 实时更新
  • gulp-connect 启动 server
  • gulp-clean-dest 文件清理
  • gulp-htmlmin HTML 压缩

配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
const {src, dest, parallel, task, series} = require('gulp');
const gulp = require('gulp');
const uglify = require('gulp-uglify');
const rename = require('gulp-rename');
const concat = require('gulp-concat');
const htmlmin = require('gulp-htmlmin');
const cleanDest = require('gulp-clean-dest');
const cleanCss = require('gulp-clean-css');
const gulpCopy = require('gulp-copy');
const connect = require('gulp-connect')
const livereload = require('gulp-livereload')


function watch() {
  livereload.listen({}, server)
  gulp.watch('gulpfile.js', series(clean, copy, js, css, html))
  gulp.watch('src/**/*.js', parallel(js))
  gulp.watch('src/**/*.css', parallel(css))
  gulp.watch('src/**/*.html', parallel(html))

}

function server() {
  connect.server({
    root: 'build',
    port: 8000,
    livereload: true
  })
}

function clean() {
  return src('build/**',)
    .pipe(cleanDest('build', {extension: ''}))

}

function copy() {
  return src('src/*.png',)
    .pipe(gulpCopy('', {}))
    .pipe(dest('build'))

}

function html() {
  return src('src/**/*.html')
    .pipe(htmlmin({collapseWhitespace: true}))   //去除空格
    .pipe(dest('build/'))
    .pipe(livereload())
    .pipe(connect.reload())
}


function css() {
  return src('src/**/*.css')
    .pipe(concat('main.css'))
    .pipe(cleanCss())
    .pipe(dest('build/'))
    .pipe(livereload())
    .pipe(connect.reload())
}


function js() {
  return src('src/**/*.js')
    .pipe(concat('main.js'))
    .pipe(uglify())
    .pipe(rename({suffix: '.min'}))
    .pipe(dest('build/'))
    .pipe(livereload())
    .pipe(connect.reload())
}

task('clean', clean)
task('copy', copy)
task('watch', watch)
task('js', js)
task('css', css)
task('html', html)
task('server', series(watch, server))

exports.default = series(clean, parallel(copy, html, js, css));