gulp是什么？
gulp 是基于 node 实现 Web 前端自动化开发的工具，利用它能够极大的提高开发效率。在 Web 前端开发工作中有很多“重复工作”，比如压缩CSS/JS文件。而这些工作都是有规律的。找到这些规律，并编写 gulp 配置代码,让 gulp 自动执行这些“重复工作”
一、安装gulp与压缩js文件
命令:
npm install gulp -g
npm install gulp --save-dev
初始化项目package.json的配置：npm init --yes
创建项目的目录结构
在js目录下新建文件( lib.js )
安装压缩js的插件: npm install gulp-uglify --save-dev,
然后在gulpfile.js中，输入任务处理代码
gulp.src('src/js/*.js')
.pipe( uglify() )
.pipe( gulp.dest('dist/js') );
});
gulp.task(name,fn) - 定义任务，第一个参数是任务名，第二个参数是任务内容。
gulp.src(path) - 选择文件，传入参数是文件路径。
gulp.pipe() - 管道，你可以暂时将 pipe 理解为将操作加入执行队列
在命令行执行任务: gulp min-js
在demo2目录下创建index.html，输入以下测试代码
发现压缩好的lib.js文件是可以正常使用的
二、压缩css文件
安装插件： npm install gulp-clean-css --save-dev
demo2/src/css下新建文件style.css
gulp.src('src/js/*.js')
.pipe( uglify() )
.pipe( gulp.dest('dist/js') );
});
gulp.task('min-css',function() {
gulp.src('src/css/*.css')
.pipe( cleanCSS() )
.pipe( gulp.dest('dist/css') );
});
然后在命令行执行gulp min-css任务 就会在dist/css生成style.css压缩文件
三、编译less文件
安装插件：npm install gulp-less --save-dev
在src/css下面新建style.less文件
gulpfile.js中添加任务:
gulp.src('src/css/*.css')
.pipe( cleanCSS() )
.pipe( gulp.dest('dist/css') );
});
gulp.task( 'compile-less',function(){
gulp.src( 'src/css/*.less' )
.pipe( less() )
.pipe( gulp.dest( 'dist/less' ) );
} );
执行任务: gulp compile-less，在dist/less中生成style.css文件
四、合并js文件
安装插件：npm install gulp-concat --save-dev
demo2/src/js新建lib2.js文件：
在gulpfile.js中新增任务:
gulp.src('src/js/*.js')
.pipe( uglify() )
.pipe( gulp.dest('dist/js') );
});
gulp.task( 'concat-file',function(){
gulp.src( 'src/js/*.js' )
.pipe( concat('all.min.js') )
.pipe( uglify() )
.pipe( gulp.dest( 'dist/js' ) );
} );
gulp.task('min-css',function(){
gulp.src( 'src/css/*.less' )
.pipe( less() )
.pipe( gulp.dest( 'dist/less' ) );
} );
执行任务：gulp concat-file
五、自动监测文件变化，执行任务
这里添加了一个默认任务default: 执行auto任务，auto里面自动监测压缩js和压缩css任务
在命令行直接执行gulp.
要执行其他任务，只需要按照这几步就可以了：
1，安装相应的插件
2，添加相应的任务
3，执行任务
以上这篇gulp教程_从入门到项目中快速上手使用方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持编程之家。
原文链接：https://www.f2er.com/js/36429.html