gulp是啥？官方的解释是基于流的自动化构建工具。好，那什么是流呢？这个流是从英语单词stream翻译过来的，不过还是不好理解。其实可以这么理解，流就是工厂的一个生产车间生产出来的半成品，一个个半成品在输送带上送往下一个加工车间的过程。把运动的半成品看成是数据，那么流动的数据就是流。唉！好难解释啊！还是看代码吧。我已经把代码上传到github了，需要的同学自取，麻烦点个小星星 https://github.com/NicknameID...
1.依赖npm
由于npm在国内比较慢，所以推荐大家使用淘宝的cnpm或者tnpm，在国内访问比较快（搞不懂国家为什么立堵墙，难受）。
2.cnpm init 初始化package.json文件
-y的作用可以跳过询问步骤直接生成默认的package.json文件
3.安装依赖包
由于依赖包太多了，就不一个一个写了 主要通过 cnpm install --save-dev 包的名字的方式来安装的，
下图所列的就是自动化工具要用的包，我已经上传到github上了点击这里获取，
下载后只要 cnpm install就可以了，就会根据package.json里的依赖去下载安装
在package.json中添加gulp字段方便调用本地安装的gulp命令,到这里package.json配置好了.
4.gulpfile.js文件的内容（重点）
功能1---自动化生成项目目录
//gulpfile.js/*首先在全局上加载gulp，这个很重要*/constgulp =require('gulp');/*在全局上定义项目的目录结构，供应后面使用*/constdirs = { dist:'./dist', src:'./src', css:'./src/css', less:'./src/less', js:'./src/js', img:'./src/img',};gulp.task('create-directory',()=>{constmkdirp =require('mkdirp');//这里要依赖mkdirp这个包，通过cnpm 安装for(letiindirs) { mkdirp(dirs[i],err=>{ err ?console.log(err) :console.log('mkdir-->'+ dirs[i]);; }); }});//在终端运行cnpm run gulp create-directory
生成需要生成的项目目录，再也不用每次都去手工创建了，幸福感爆棚有木有！！！
功能2---编译less，并且实现less注入功能，热更新页面，方便开发时调试
这个功能要依赖的插件有
1.gulp-less
2.browser-sync
3.gulp-notify
4.gulp-plumber
/*全局定义要处理的文件*/constfiles = { lessFiles:'./src/less/go.less', cssFiles:'./src/css/*.css', jsFiles:'./src/js/*.js', imgFiles:'./src/img/*.*'}//编译lessgulp.task('compile-less',()=>{constless =require('gulp-less');//依赖gulp-less的插件constnotify =require('gulp-notify');constplumber =require('gulp-plumber');constbrowserSync =require('browser-sync').create();//browser-sync同步服务器constreload = browserSync.reload;//将browser-sync的reload方法存起来，方便调用returngulp.src(files.lessFiles) .pipe(plumber({ errorHandler: notify.onError('Error: <%= error.message %>') }))//使用gulp-notify和gulp-plumber用来阻止因为less语法写错跳出监视程序发生.pipe(less()) .pipe(gulp.dest(dirs.css +'/')) .pipe(reload({stream:true}));});// 本地服务器功能，自动刷新（开发环境）gulp.task('server', ['compile-less'],()=>{constbrowserSync =require('browser-sync').create();constreload = browserSync.reload; browserSync.init({ server:'./'}); gulp.watch(dirs.less+'/**/*.less', ['compile-less']);//监视less文件夹中的所有less文件，有改动就调用compile-less任务编译lessgulp.watch('./*.html').on('change', reload);//监视html文件，有改动就刷新浏览器gulp.watch(dirs.js+'/**/*.js').on('change', reload);//监视所有js文件有改动就刷新浏览器});//在cmd运行cnpm run gulp server
/*全局定义要处理的文件*/
constfiles = { lessFiles:'./src/less/go.less', cssFiles:'./src/css/*.css', jsFiles:'./src/js/*.js', imgFiles:'./src/img/*.*'}//编译
lessgulp.task('compile-less',()=>{constless =require('gulp-less');//依赖gulp-less的插件
constnotify =require('gulp-notify');constplumber =require('gulp-plumber');constbrowserSync =require('browser-sync').create();//browser-sync同步服务器
constreload = browserSync.reload;//将browser-sync的reload方法存起来，方便调用returngulp.src(files.lessFiles) .pipe(plumber({ errorHandler: notify.onError('Error: <%= error.message %>') }))
//使用gulp-notify和gulp-plumber用来阻止因为less语法写错跳出监视程序发生.pipe(less()) .pipe(gulp.dest(dirs.css +'/')) .pipe(reload({stream:true}));});// 本地服务器功能，自动刷新（开发环境）gulp.task('server', ['compile-less'],()=>{constbrowserSync =require('browser-sync').create();constreload = browserSync.reload; browserSync.init({ server:'./'}); gulp.watch(dirs.less+'/**/*.less', ['compile-less']);//监视less文件夹中的所有less文件，有改动就调用compile-less任务编译lessgulp.watch('./*.html').on('change', reload);//监视html文件，有改动就刷新浏览器gulp.watch(dirs.js+'/**/*.js').on('change', reload);//监视所有js文件有改动就刷新浏览器});//在cmd运行cnpm run gulp server
可以看到程序正在后台运行，正在监听文件改动
这样就可以左边开着编辑器写代码，右边开着浏览器看效果了，有木有很爽，人生别无他求了（感动中！！！），在跟目录下建立index.html的页面。
功能3---添加浏览器私有前缀
要用到的插件包
1.gulp-postcss
2.gulp-sourcemaps
3.autoprefixer
//添加浏览器私有前缀（生产环境）gulp.task('autoprefixer',()=>{constpostcss =require('gulp-postcss');constsourcemaps =require('gulp-sourcemaps');constautoprefixer =require('autoprefixer');returngulp.src(files.cssFiles) .pipe(sourcemaps.init())//添加sourcemap,方便调试.pipe(postcss([ autoprefixer() ]))//添加浏览器私有前缀，解决浏览器的兼容问题.pipe(sourcemaps.write('.')) .pipe(gulp.dest(dirs.css+'/'))});
功能4---压缩css
要用到的插件包
1.gulp-minify-css
2.gulp-rename
// 压缩css(生产环境)gulp.task('minify-css',function(){constminifyCSS =require('gulp-minify-css');constrename =require("gulp-rename");returngulp.src(dirs.css+'/**/*.css') .pipe(minifyCSS({/*keepBreaks: true*/})) .pipe(rename(path=>path.basename +='.min'))//重命名文件输出后的样式为 原文件名.min.css.pipe(gulp.dest('./dist/css/'))});
功能5---合并压缩JavaScript文件
要用到的插件包
1.gulp-concat
2.gulp-uglify
3.gulp-rename
// js文件--合并--压缩(生产环境)gulp.task('js-concat-compress',(cb)=>{letname ='';//先定义一个变量将用于后面存文件名constconcat =require('gulp-concat');constuglify =require('gulp-uglify');constrename =require("gulp-rename");returngulp.src(dirs.js+'/**/*.js') .pipe(rename(path=>{path.basename +='';name=path.basename;})) .pipe(concat('bundle.js'))//合并js文件.pipe(uglify())//压缩js文件.pipe(rename(path=>{ path.basename = name+'.'+path.basename+'.min';//改文件名加上 .min})) .pipe(gulp.dest('dist/js/')); });
功能6---图片无损压缩
要用到的插件包
1.gulp-imagemin
// 图片无损压缩gulp.task('img-handl',()=>{constimagemin =require('gulp-imagemin');returngulp.src(files.imgFiles) .pipe(imagemin())//imagemin()里是可以写参数的，有需要的可以去github的页面看看.pipe(gulp.dest('./dist/img/'))});
功能7---项目的打包
有时候我们做完东西需要打包，方便传输，而有些文件又是不需要打包进去的，比如说node_modules文件夹，一键打包的快感体验过绝对会爱上的
依赖的插件包
1.gulp-zip
// 项目打包(生产环境)gulp.task('zip',()=>{constzip =require('gulp-zip');returngulp.src(['./*.html','**/dist/**/*.*','!**/node_modules/**/*.*'])//这里需要注意的是，在写要打包的文件时，避免打包的文件不能写在开头，这里'!**/node_modules/**/*.*'放在了最后.pipe(zip('project.zip'))//打包后的文件名，自己随意取.pipe(gulp.dest('./'))});
5.整理任务执行，方便调用任务
因为gulp执行任务时是以最大的任务并发数同时进行的，所以有时候我们需要按步骤进行，就需要插件gulp-sequence，将任务按顺序写入，就会按顺序执行
写了这么多功能模块，需要好好的整理一下，方便调用。我已经把完整的代码上传到github了，需要的同学自取，麻烦点个小星星 https://github.com/NicknameID...
// ------------------开发阶段命令----------------------------------------------------gulp.task('start', ['create-directory']);//项目初始化的第一个命令gulp.task('dev-watch', ['server']);//开始编写项目后开启服务器实时更新// ------------------生产阶段命令------------------------------------------------------gulp.task('prefixer', ['autoprefixer']);//给css文件添加浏览器私有前缀 files.cssFiles ==>> .src/css/gulp.task('min-css', ['minify-css']);//压缩css文件 files.cssFiles ==>> dist/css/gulp.task('js-handl', ['js-concat-compress']);//合js文件 dirs.js/**/*.js ==>> ./dist/js/concated.jsgulp.task('img-handl', ['img-handl'])//处理图片，对图片进行无损的压缩//----------------一键生成项目文件命令-----------------------------------------------//因为gulp执行任务时是以最大的任务并发数同时进行的，所以有时候我们需要按步骤进行，就需要插件`gulp-sequence`，将任务按顺序写入，就会按顺序执行const runSequence = require('gulp-sequence').use(gulp);gulp.task('bunld-project',runSequence('clean-dist','compile-less','autoprefixer','minify-css','js-concat-compress','img-handl','zip'))
6.小结
看到没有，使用gulp其实并没有用到很多本身的API，都是通过不同的插件来实现的处理过程，所以gulp更加像一个处理平台，而非大包大揽的处理程序，他只负责数据的流向，从pipe(管道)的这头流向另外一头，剩下的事情就交给各个插件了，像不像现代社会的细化分工。分工明确才能提高效率，这是社会发展的经验总结。文章有点长，感谢看完的小伙伴！！！
原文地址：https://segmentfault.com/a/1190000010428396#articleHeader5
网友评论