Glup 构建工具

将开发流程中让人痛苦或耗时的任务自动化，从而减少你所浪费的时间、创造更大价值。

环境搭建

//  3.x 与 4.x版本 有区别，请注意

[ sudo] npm install gulp-cli -g // 全局环境   

npm install gulp -D  // 本地开发环境

gulp --help

以上是对gulp环境的搭建

项目准备

你可以自己写几个文件测试文件

ps: scss 文件，html里还是要引用对应的css文件。我这块是vscode,找到插件
编辑器下面有 Watch Sass 了解一下

确认打开html页面（css,js运行没有问题）没有问题

gulpfile.js

重头戏

task

每个 gulp 任务（task）都是一个异步的 JavaScript 函数，此函数是一个可以接收 callback 作为参数的函数或在一些gulp特定函数。

src

创建一个流，用于从文件系统读取 Vinyl 对象。

dest

创建一个用于将 Vinyl 对象写入到文件系统的流。

pipe

程序运行管道

watch

实时监听文件改变，及时更新打包

series

将任务函数和/或组合操作组合成更大的操作，这些操作将按顺序依次执行。

代码

version 1.0

简单文件导出

gulpfile.js

// node commonJS规范

const gulp = require("gulp");


const filePath = {
    enter:"src",
    output:"dist"
}

gulp.task("html",function(){
    return gulp.src(filePath.enter+"/index.html")
    .pipe(gulp.dest(filePath.output))
})


gulp.task("image",function(){
    return gulp.src(filePath.enter+"/images/**/*.{jpg,png,jpeg}")
    .pipe(gulp.dest(filePath.output+"/images"))
})



// 监听
gulp.task("watch",function(){
    gulp.watch(filePath.enter+"/index.html",gulp.series(["html"])); //监听哪些文件，执行对应的任务
    gulp.watch(filePath.enter+"/images/**/*.{jpg,png,jpeg}",gulp.series(["image"]));
})

// 一次性执行多个文件
// // Task function must be specified
//  watch task has to be a function (optionally generated by using gulp.parallel or gulp.series)
// gulp.task("build",["html","image"],function(){  这种写法是3.x 如果更新4.0版本用如下  gulp.series
//     console.log("执行完毕")
// });
gulp.task("build",gulp.series(["html","image"],function(){
    console.log("执行完毕")
}))


// 运行命令
gulp [task注册的命令]

插件

常用插件整理

npm install gulp-sass -D // 编译iscss
npm install gulp-minify-css -D // 压缩文件
npm install gulp-autoprefixer -D // CSS兼容代码
npm install gulp-rename -D //文件重命名
npm install gulp-concat -D // 合并JS文件
npm install gulp-uglify -D // 压缩JS文件
npm install gulp-clean  -D// 清理文件
npm install gulp-connect -D // 连接设置服务器

version 2.0

gulpfile.js

// node commonJS规范

const gulp = require("gulp");
const sass = require("gulp-sass");
const minifyCSS = require("gulp-minify-css");
const rename = require("gulp-rename");
const uglify = require("gulp-uglify");
const concat = require("gulp-concat");
const connect = require("gulp-connect")
const autoprefixer = require('gulp-autoprefixer');

const filePath = {
    enter:"src",
    output:"dist"
}

gulp.task("html",function(){
    return gulp.src(filePath.enter+"/index.html")
    .pipe(gulp.dest(filePath.output))
    .pipe(connect.reload());
})


gulp.task("image",function(){
    return gulp.src(filePath.enter+"/images/**/*.{jpg,png,jpeg}")
    .pipe(gulp.dest(filePath.output+"/images"))
    .pipe(connect.reload());
})

gulp.task("sass",function(){
    return gulp.src(filePath.enter+"/css/*.scss")
    .pipe(sass())
    .pipe(autoprefixer({
        cascade: false
    }))
    .pipe(gulp.dest(filePath.output+"/css"))
    .pipe(minifyCSS())
    .pipe(rename("index.min.css"))
    .pipe(gulp.dest(filePath.output+"/css"))
    .pipe(connect.reload());
})

gulp.task("script",function(){
    return gulp.src(filePath.enter+"/js/*.js")
    .pipe(concat("index.js"))
    .pipe(gulp.dest(filePath.output+"/js"))
    .pipe(uglify())
    .pipe(rename("index.min.js"))
    .pipe(gulp.dest(filePath.output+"/js"))
    .pipe(connect.reload());
})

// 一次性执行多个文件
// // Task function must be specified
//  watch task has to be a function (optionally generated by using gulp.parallel or gulp.series)
// gulp.task("build",["html","image"],function(){
//     console.log("执行完毕")
// });


gulp.task("build",gulp.series(["html","image","script"],function(){
    console.log("执行完毕")
}))

// 监听
gulp.task("watch",function(){
    gulp.watch(filePath.enter+"/index.html",gulp.series(["html"])); //监听哪些文件，执行对应的任务
    gulp.watch(filePath.enter+"/images/**/*.{jpg,png,jpeg}",gulp.series(["image"]));
    gulp.watch(filePath.enter+"/css/*.scss",gulp.series(["sass"]));
    gulp.watch(filePath.enter+"/js/*.js",gulp.series(["script"]))
})

// 启动服务
gulp.task("server",function(){
    connect.server({
        root:filePath.output,
        port:9999,
        livereload:true
    })
})


//监听和服务同时启动

gulp.task("default",gulp.parallel(["watch","server"]))

如果原文件路径和导出文件路径不一样，要在原文件中修改。不要动dist文件下

如果开发环境和生产环境，你可以写两个文件，两个函数，包裹对应下的方法。

简单入门就这样了