gulp的使用

gulp的使用

因为gulp和nodejs都是版本之间不兼容，所以有的电脑下载gulp都会产生不同的问题

现在说一种简单实用的，本人用的就是这种

• 删除所有关于gulp的下载

npm uninstall gulp -g 
npm uninstall gulp --save-dev

• 删除所有node版本

npm uninstall node -g

• 安装nvm(node管理器,切换node版本)

https://nvm.en.softonic.com/   用我给的github地址或者自己找 下载，注意安装路径不要有中文和空格

• 安装好nvm后，用nvm命令语句下载node ,建议10.12.0版本，兼容性较强

nvm install v10.12.0

额外补充nvm命令语句

nvm list   //查看下载的node都有哪些版本
nvm use v10.12.0 //切换node版本

• 删除了所有和gulp相关的插件,开始下载gulp@3或者gulp@4 (两个不同的版本)

npm i gulp@3 -g     //全局安装gulp@3版本
npm i gulp@3 --save-dev  //安装gulp@3的测试环境

• 最终效果

gulp -v //查看gulp的安装

出现上面这个局可以使用了

安装好了后，说说gulp的语法

1.在根目录下创建gulpfile.js文件(gulp的操作全在这个文件内完成)--->直接引入gulp(commenjs的引入方式)

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

2.gulp下的方法

• task 定义任务 3个参数 第一个参数是默认的任务类型，第二个参数是执行顺序，第三个参数是执行函数

gulp.task("a",function(){
    console.log("aaa");
});
gulp.task("b",function(){
    console.log("bbb");
});
gulp.task("default",["a","b"],function(){   
    console.log("执行默认任务");
});

• pipe 管道

pipe 管道,gulp方法中的连接   a.pipe(b) 将a写入到b中   

• src 读取文件 5种读取方式

 gulp.src("js/a.js") 读取一个文件
 gulp.src(["js/a.js","js/b.js"]) 读取两个文件
 gulp.src("js/*.js")  js文件夹下所有的js文件
 gulp.src("js/*.*") js文件夹下所有的文件
 正则表达式选择文件名，进行加载

• dest 数据存储

gulp.dest(path)  

• watch 侦听文件

gulp.task("default",function () {
    gulp.watch('js/*.js', function(event){
        console.log(event.type); //变化类型 added为新增,deleted为删除，changed为改变
        console.log(event.path); //变化的文件的路径
    });
});
	

gulp常用插件

• 文件合并，压缩，改名，sass解析等等
  下载插件，引入插件，使用插件

npm install  gulp-concat --save-dev  文件合并
npm install  gulp-uglify --save-dev  文件压缩
npm install  gulp-rename --save-dev  文件重命名
npm install  gulp-sass   --save-dev  sass文件解析

• 插件使用

gulp.task("default",function(){
    gulp.src("./gulp/**/*.js")  //加载
    .pipe(concat("main.js"))  //合并
    .pipe(uglify())    //压缩
    .pipe(rename("main.min.js"))  //重命名
    .pipe(gulp.dest("./dist/")); 
})

• 上面的插件下载和引入有些繁琐，所以更多的使用自动加载的插件

npm install  gulp-load-plugins --save-dev
var plugins=require("gulp-load-plugins")();  加载到的是一个函数，所以要执行，才会获得内容
gulp.task("default",function(){
    gulp.src("./gulp/**/*.js")
    .pipe(plugins.concat("main.js"))
    .pipe(plugins.uglify())
    .pipe(plugins.rename("main.min.js"))
    .pipe(gulp.dest("./dist/"));
})