王世茹的博客 主页存档标签
gulp基础

安装

1
2
3
4
# 初始化项目
npm init -y
# 安装
npm install -g/-D gulp

package.json

1
2
3
"scripts": {
    "build": "gulp",
}

配置

gulpfile.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// 压缩js uglifyjs
function js(){
    console.log('this is js task')
}
// 对scss/less编译、压缩，输出css文件
function css(){
    console.log('this is css task')
}
// 监听这些文件的变化
function watcher(){
    
}
// 删除dist目录中的内容
function clean(){
    
}

exports.scripts = js
exports.styles = css

exports.default = function(){
    console.log('hello gulp!')
}

调用任务

1
2
npx gulp --tasks
npx gulp scripts

插件

安装

1
yarn add gulp-sass gulp-autoprefixer gulp-load-plugins gulp-uglify del -D

gulpfile.js

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
const { src, dest, series, watch } = require('gulp')
// gulp-uglify=>plugins.uglify = require('gulp-uglify')
// const plugins = require('gulp-load-plugins')
const uglify = require('gulp-uglify')
const del = require('del')
const autoprefixer = require('gulp-autoprefixer')
const sass = require('gulp-sass')

// 压缩js uglifyjs
function js(cb){
    console.log('this is js task')
    src('js/*.js')
    // 下一个处理环节
        .pipe(uglify())
        .pipe(dest('./dist/js'))
    cb()
}
// 对scss/less编译、压缩，输出css文件
function css(cb){
    console.log('this is css task')
    src('css/*.scss')
        .pipe(sass({outputStyle: 'compressed'}))
        .pipe(autoprefixer({
            cascade: false,
            remove: false
        }))
        .pipe(dest('./dist/css'))
    cb()
}
// 监听这些文件的变化
function watcher(cb){
    watch('js/*.js', js)
    watch('css/*.scss', css)
    cb()
}
// 删除dist目录中的内容
function clean(cb){
    del('./dist')
    cb()
}

exports.scripts = js
exports.styles = css
exports.clean = clean

// 自动编译更新
exports.default = series([
    clean,
    js,
    css,
    watcher
])

browsersync 网页实时刷新

安装

1
yarn add browser-sync -D

gulpfile.js

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
const { src, dest, series, watch } = require('gulp')
const uglify = require('gulp-uglify')
const del = require('del')
const autoprefixer = require('gulp-autoprefixer')
const sass = require('gulp-sass')
const browserSync = require('browser-sync').create()
const reload = browserSync.reload

// 压缩js uglifyjs
function js(cb){
    console.log('this is js task')
    src('js/*.js')
    // 下一个处理环节
        .pipe(uglify())
        .pipe(dest('./dist/js'))
        // reload
        .pipe(reload({ stream: true }))
    cb()
}
// 对scss/less编译、压缩，输出css文件
function css(cb){
    console.log('this is css task')
    src('css/*.scss')
        .pipe(sass({outputStyle: 'compressed'}))
        .pipe(autoprefixer({
            cascade: false,
            remove: false
        }))
        .pipe(dest('./dist/css'))
        // reload
        .pipe(reload({ stream: true }))
    cb()
}
// 监听这些文件的变化
function watcher(cb){
    watch('js/*.js', js)
    watch('css/*.scss', css)
    cb()
}
// 删除dist目录中的内容
function clean(cb){
    del('./dist')
    cb()
}

// server任务
function server(cb){
    browserSync.init({
        server: {
            baseDir: './'
        }
    })
    cb()
}

exports.scripts = js
exports.styles = css
exports.clean = clean

exports.default = series([
    clean,
    js,
    css,
    server,
    watcher
])

执行 npm run build 即可

工具