流程：（在gulpfile.js文件中）

导入第三方gulp

导入插件

创建任务

导出任务

 

1.安装Gulp需要node环境  （基于流格式，依赖node）

2.Gulp作用：

压缩： 去掉空格

转码：css添加前缀  ，js es6转es5  ,  html  格式转换

处理静态资源文件，第三方文件

3.命令：cnpm i -g gulp   安装gulp环境

4.创建一个与src同级的gulpfile.js文件（用于书写项目打包配置流程）

5.下载gulp第三方包：cnpm i -D gulp

6.常用插件：

cssmin:cnpm i -D gulp-cssmin

autoprefixer:cnpm i -D gulp-autoprefixer

sass:cnpm i -D gulp-sass

uglify:cnpm i -D gulp-uglify

babel:cnpm i -D gulp-babel

htmlmin:cnpm i -D gulp-htmlmin

del:cnpm i -D del

webserver:cnpm i -D gulp-webserver

 

gulp@3版本

const gulp = require('gulp')

const cssmin = require('gulp-cssmin')

gulp.task('cssHandler', function () {

    return gulp
        .src('./src/css/index.css')
        .pipe(cssmin())
        .pipe(gulp.dest('./dist/css/'))
})

 

gulp@4版本

const gulp = require('gulp')

const cssmin = require('gulp-cssmin')

const cssHandler = function () {
    return gulp
        .src('./src/css/index.css')
        .pipe(cssmin())
        .pipe(gulp.dest('./dist/css/'))
}
// 导出
module.exports.cssHandler = cssHandler

 

7.创建一个默认任务

module.exports.default = gulp.parallel(cssHandler,sassHandler,jsHandler,...)  (一起执行)

module.exports.default = gulp.series(cssHandler,sassHandler,jsHandler,...)    (一个一个执行)

执行命令：  gulp  即可

8.启动服务

const webHandler = function () {
    return gulp
        .src('./dist')
        .pipe(webserver({
            host: 'localhost',
            port: '8080',
            livereload: true,                //文件修改时刷新页面
            open: './src/pages/index.html'   //默认打开文件
        })

        )
}

9.常用api: