官网：https://www.gulpjs.com.cn/

新建文件gulptest

文件目录如下：

 

 dist：编译后输出文件

src：源代码

gulpfile.js:gulp的配置文件

index.html：入口

package.json:包配置文件

刚开始可以在package.json中写下，项目名和版本：

{
    "name": "gulp_test",
    "version": "1.0.0"
}

 

 安装全局gulp

npm install gulp -g

局部安装gulp

npm install gulp --save-dev

然后package.json中就多了一行：

 

 gulpfile.js：

var gulp = require("gulp");//引入gulp

// 注册任务
// gulp.series：按照顺序执行
// gulp.paralle：可以并行计算
gulp.task("任务名",function(){
    // 配置任务的操作
})
// 注册完任务，可以在命令行通过 gulp 任务名  来执行任务
// gulp的任务多的话，每次每个任务都通过  gulp 任务名来执行，会比较费时，可以通过默认任务来执行


// 注册默认任务
// gulp.task("default",['任务名1','任务名2'])//gulp3写法
// gulp.task("default",gulp.series('任务名1','任务名2',function(){})) //gulp4写法
gulp.task("default",gulp.series(function(){

}))

/**
 * 经常使用的gulp插件
 * 相关插件：
 *  gulp-concat:合并文件（js/css）
 *  gulp-uglify:压缩js文件
 *  gulp-rename:文件重命名
 *  gulp-less：编译less
 *  gulp-clear-css：压缩css
 *  gulp-livereload:实时自动编译刷新
 */

/**
 * 重要api
 * gulp.src(filepath/pathArr):指向指定路径的所有文件，返回文件流对象；用于读取文件
 * gulp.dest(dirPath/pathArr):指向指定的所有文件夹；用于向文件夹中输出文件
 * gulp.task(name,[deps],fn):定义一个任务
 * gulp.watch():监视文件的变化
 * 
 */

 

 

 

 

 

 

 

 

。