Gulp打包工具

1.全局安装gulp工具

npm install --global gulp-cli

2.创建项目并且初始化

npm init -y

3.在项目中安装gulp

npm i gulp -D

4.配置gulpfile.js

//模块全部安装为开发依赖，然后载入
let gulp = require('gulp')
// 载入sass的模块
const sass = require('gulp-sass')(require('sass'))
// 载入css压缩的模块
var cssmin = require('gulp-cssmin')
// 载入重命名模块
const rename = require('gulp-rename')
// 载入转换JS语法的工具
const babel = require('gulp-babel')
// 载入压缩JS的工具
const uglify = require('gulp-uglify')
// 载入html压缩工具
const htmlmin = require('gulp-htmlmin')
// 载入创建web服务的模块
const connect = require('gulp-connect')
// 载入打开浏览器的模块
const  open = require('open')
// 自动打开浏览器的任务
function taskOpen(cb){
    // 创建并且启动web服务
    connect.server({
        port:8080,
        root:'dist'
    })
    // 自动打开浏览器
    open('http://127.0.0.1:8080/pages/index.html')
    // 如果src/js目录下的文件被修改，重新执行taskJS任务
    gulp.watch('src/js/**',taskJs);
    cb()
}
// 专门处理静态资源
function taskStatic(cb){
    gulp.src('src/static/**')
    .pipe(gulp.dest('dist/static'))
    cb()
}
// 专门压缩html代码
function taskHtml(cb){
    gulp.src('src/pages/**')
    // 压缩html代码
    .pipe(htmlmin({ collapseWhitespace: true }))
    .pipe(gulp.dest('dist/pages'))
    cb()
}

// 专门打包JS语法的任务
function taskJs(cb){
    gulp.src('src/js/**')
    // 将ES6的语法转换
    .pipe(babel({presets:['es2015']}))
    // 压缩js代码
    .pipe(uglify())
    // 保存文件
    .pipe(gulp.dest('dist/js'))
    cb()
}
// 专门处理sass源码的任务
function taskSass(cb){
    gulp.src('src/sass/**')
    // sass源码转换
    .pipe(sass())
    // css压缩
    .pipe(cssmin())
    // 重命名文件
    .pipe(rename({
        suffix:'.min'
    }))
    // 输出内容到文件中
    .pipe(gulp.dest('dist/css'))
    cb()
}

// 导出一个同步任务
exports.default = gulp.series(taskSass,taskJs,taskHtml,taskStatic,taskOpen)

Gulp打包工具

悦读