gulp

初始化

1.0 初始化当前目录
    npm init
    全局安装：
    npm i gulp -g
    gulp -v # 测试是否安装成功

生成package.json文件，存放你当前项目一些配置信息。

2.0 在当前项目里面安装gulp到本地
npm install gulp --save-dev 
相当于 npm i gulp@3.9.1 -D
--save 将这个文件安装到本地的当前文件夹
-dev 将安装gulp的信息保存在package.json里面

3.0 创建gulpfile.js 文件，专门gulp去编写任务。
gulp 任务名
运行gulp任务

/*
* commonJS规范
* require() 将这个模块引入
* 使用这个模块上的函数
*/

const gulp = require("gulp")
// 编写第一个任务
// 第一个参数：任务的名字，自定义
// 第二个参数：回调函数，任务执行的功能

gulp.task("hello",function(){
    console.log("hello world")
})

gulp.src() 找到源文件路径

gulp.dest() 找到目的路径路径，若不存在则自动创建

pipe() 理解程序运行管道

//1.0 整理html 文件
gulp.task("copy-html",function(){
    return gulp.src("cert/index.html")
    .pipe(gulp.dest("dist/"))
})

// 2. 静态文件 css img

gulp.task("images",function(){
    // return gulp.src("img/*.{jpg,png}").pipe(gulp.dest("dist/images"))
    return gulp.src("img/**/*").pipe(gulp.dest("dist/images"))

})

// 3. copy 多个文件到一个文件中

gulp.task("data",function(){
   return gulp.src(['json/*.json','xml/*.xml','!xml/4.xml']).pipe(gulp.dest("dist/data"))
})

//4. 一次性执行多个任务
//4. 一次性执行多个任务
// gulp.series：按照顺序执行
// gulp.parallel：可以并行计算
gulp.task('my-task',gulp.series('a','b','c',() => {
    // Do something after a,b, and c are finished.
}));
 
gulp.task('build',gulp.parallel('style','script','images',() => {
    // build the website.
}));

gulp.task('my-task',gulp.series('a',gulp.parallel('style','script','image'),'b','c',() => {
    // Do something after a, b, and c are finished.
}));

//5. 监听
gulp.task("watch",function(){
    gulp.watch("index.html",["copy-html"])
    gulp.watch(["json/*.json","xml/*.xml"],["data"])
})

gulp 插件

使用第三方插件步骤：

1. 下载插件到本地

   npm install 插件名字 --save-dev

   npm i 插件名字 -D

2. 通过require引入文件
3. 3.查阅插件具体用法

const sass = require("gulp-sass");
sass.compiler = require('node-sass');
gulp.task("sass",function(){
    return gulp.src("stylesheet/index.scss")
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest("dist/css"))
})

gulp

gulp强调的是前端开发的工作流程，我们可以通过配置一系列的task，定义task处理的事务（例如文件压缩合并、雪碧图、启动server、版本控制等），然后定义执行顺序，来让gulp执行这些task，从而构建项目的整个前端开发流程。

PS：简单说就一个Task Runner

webpack

webpack是一个前端模块化方案，更侧重模块打包，我们可以把开发中的所有资源（图片、js文件、css文件等）都看成模块，通过loader（加载器）和plugins（插件）对资源进行处理，打包成符合生产环境部署的前端资源。

PS：webpack is a module bundle

相同功能

gulp与webpack可以实现一些相同功能，如下（列举部分）：

两者区别

虽然都是前端自动化构建工具，但看他们的定位就知道不是对等的。

gulp严格上讲，模块化不是他强调的东西，他旨在规范前端开发流程。

webpack更是明显强调模块化开发，而那些文件压缩合并、预处理等功能，不过是他附带的功能。