Gulp--手把手教你搭建前端自动化平台

前端的发展真的是快，前几年仍是刀耕火种的开个编辑器，几行html和js代码就能上浏览器跑了。如今呢？各类包，各类库，各类框架，各类编程范式。究其缘由，就是咱们高中社会课本中那句话

人民日益增加的文质文化需求，同落后的社会生产之间的矛盾

想一想也是，之前刀耕火种的编写页面效率很是低，而我国到目前为止网民的数量已经超过7亿了，可想而知对网页数量和多样化的需求巨大，那有什么方法来提升页面的生产效率呢？这就是我今天要讲的基于gulp平台的自动化生产平台。
gulp是啥？官方的解释是基于流的自动化构建工具。好，那什么是流呢？这个流是从英语单词stream翻译过来的，不过仍是很差理解。其实能够这么理解，流就是工厂的一个生产车间生产出来的半成品，一个个半成品在输送带上送往下一个加工车间的过程。把运动的半成品当作是数据，那么流动的数据就是流。唉！好难解释啊！仍是看代码吧。我已经把代码上传到github了，须要的同窗自取，麻烦点个小星星 https://github.com/NicknameID...

1.依赖npm

因为npm在国内比较慢，因此推荐你们使用淘宝的cnpm，在国内访问比较快（搞不懂国家为何立堵墙，难受）。

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，这个很重要*/
const gulp = require('gulp');
/*在全局上定义项目的目录结构，供应后面使用*/
const dirs = {
  dist:'./dist',
  src: './src',
  css: './src/css',
  less: './src/less',
  js: './src/js',
  img: './src/img',
};
gulp.task('create-directory', () => {
  const mkdirp = require('mkdirp'); //这里要依赖mkdirp这个包，经过cnpm 安装
  for (let i in dirs) {
    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

/*全局定义要处理的文件*/
const files = {
  lessFiles: './src/less/go.less',
  cssFiles: './src/css/*.css',
  jsFiles: './src/js/*.js',
  imgFiles:'./src/img/*.*'
}
//编译less
gulp.task('compile-less', () => {
const less = require('gulp-less'); //依赖gulp-less的插件
const notify = require('gulp-notify'); 
const plumber = require('gulp-plumber');
const browserSync = require('browser-sync').create(); //browser-sync同步服务器
const reload = browserSync.reload; //将browser-sync的reload方法存起来，方便调用
  return gulp.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'],()=>{
const browserSync = require('browser-sync').create();
const reload = browserSync.reload;
  browserSync.init({
    server: './'
  });
  gulp.watch(dirs.less+'/**/*.less', ['compile-less']); //监视less文件夹中的全部less文件，有改动就调用compile-less任务编译less
  gulp.watch('./*.html').on('change', reload); //监视html文件，有改动就刷新浏览器
  gulp.watch(dirs.js+'/**/*.js').on('change', reload); //监视全部js文件有改动就刷新浏览器
});
//在cmd运行cnpm run gulp server

能够看到程序正在后台运行，正在监听文件改动

这样就能够左边开着编辑器写代码，右边开着浏览器看效果了，有木有很爽，人生别无他求了（感动中！！！）

• 功能3---添加浏览器私有前缀
  要用到的插件包

1.gulp-postcss
2.gulp-sourcemaps
3.autoprefixer

//添加浏览器私有前缀（生产环境）
gulp.task('autoprefixer', () => {
  const postcss = require('gulp-postcss');
  const sourcemaps = require('gulp-sourcemaps');
  const autoprefixer = require('autoprefixer');
  return gulp.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 () {
  const minifyCSS = require('gulp-minify-css');
  const rename = require("gulp-rename");
  return gulp.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)=>{
  let name = ''; //先定义一个变量将用于后面存文件名
  const concat = require('gulp-concat');
  const uglify = require('gulp-uglify');
  const rename = require("gulp-rename");
  return gulp.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',()=>{
  const imagemin = require('gulp-imagemin');
  return gulp.src(files.imgFiles)
    .pipe(imagemin())  //imagemin()里是能够写参数的，有须要的能够去github的页面看看
    .pipe(gulp.dest('./dist/img/'))
});

• 功能7---项目的打包
  有时候咱们作完东西须要打包，方便传输，而有些文件又是不须要打包进去的，好比说node_modules文件夹，一键打包的快感体验过绝对会爱上的

依赖的插件包
1.gulp-zip

// 项目打包(生产环境)
gulp.task('zip',()=>{
  const zip = require('gulp-zip');
  return gulp.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.js
gulp.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(管道)的这头流向另一头，剩下的事情就交给各个插件了，像不像现代社会的细化分工。分工明确才能提升效率，这是社会发展的经验总结。文章有点长，感谢看完的小伙伴！！！