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/"));
})