gulp轻松上手到掌握

由于已经学习webpack，所以有些基础知识将不再细节讲解
webpack.

一、安装

首先需要安装node，这里采用傻瓜式安装。

然后我这里是全局安装gulp-cli，命令为npm i -g gulp-cli,本地安装为npm i -D gulp-cli；使用gulp -v查看版本信息

然后在自己的项目根目录下安装gulp(记得先初始化npm init)，命令为npm i -D gulp；这时使用gulp -v查看版本信息

到此我们的gulp就安装好了，对于gul的安装根据自己的需求来决定是全局安装还是本地安装

gulp安装正常，但是查看gulp -v和使用gulp的时候报错

原因：缺少环境变量或环境变量错误。

查找环境变量的方法：在dos下输入npm config get prefix就会显示一个地址，这个地址就是那个系统变量PATH
例如：

环境变量path中添加路径：C:\Program Files\nodejs\node_cache

二、上手使用

1.创建 gulpfile 文件

在项目的根目录下创建一个名为 gulpfile.js 的文件，并在文件中输入以下内容：

function defaultTask(cb) {
  // place code for your default task here
  console.log('jimo');//这里是我们用来测试输出的
  cb();
}
exports.default = defaultTask

当前路径下使用gulp命令，即可运行

2.series和parallel方法使用

//gulpfile.js
const {series, parallel} = require('gulp');//利用es6结构导出两个方法
function html(cb){
  console.log('html调用了');
  cb();//cb为函数执行完毕
}
function css(cb){
  console.log('css调用了');
  cb();
}
function js(cb){
  console.log('js调用了');
  cb();
}

1. 如果exports.default = series(html,css)，执行gulp
   
   即series会按顺序先执行完html方法，在执行css方法

2. 如果exports.default = parallel(html,css)，执行gulp
   
   即parallel会同时执行html和css方法

3. 如果exports.default = series(html,parallel(css,js))，执行gulp
   
   即可以混合使用

注：series中如果某一方法出现错误，则不会再继续执行后面代码；parallel中某方法出现错误，不一定会停止，看各个方法执行时间

3.src和dest方法使用

首先创建以下文件

//gulpfile.js
const {src, dest} = require('gulp');
exports.default = function(){
  return src('src/js/*.js')
    .pipe(dest('dist/js'))
}

如果有less>>css>>压缩>>输出，则每一个阶段都会输出文件，而每次每个环节都需要pipe（管道）

执行gulp

生成我们设置的路径文件

1.安装插件gulp-uglify

删除最先的dist/index.js文件
使用npm i -D gulp-uglify命令，安装gulp-uglify插件，实现压缩打包

//gulpfile.js
const {src, dest} = require('gulp');
const uglify = require('gulp-uglify');
exports.default = function(){
  return src('src/js/*.js')
  	//这里是环节的执行阶段
    .pipe(uglify())
    .pipe(dest('dist/js'))
}

//src/index.js
var arr = [1,2,3,4,5,6];//由于是commonJs环境，所以不要使用es6语法
var result = 0;
for(var i = 0;i < arr.length;i ++){
    result += arr[i];
};
console.log(result);

2.安装插件gulp-rename

删除前面的dist/index.js
使用npm i -D gulp-rename命令，安装gulp-rename插件，实现对打包文件的重命名

const {src, dest} = require('gulp');
const uglify = require('gulp-uglify');
const rename = require('gulp-rename');
exports.default = function(){
  return src('src/js/*.js')
    .pipe(dest('dist/js'))   //不使用插件打包后自动命名
    .pipe(uglify())
    .pipe(rename({extname: '.min.js'}))     //使用插件打包后重命名
    .pipe(dest('dist/js'))
}

4.watch文件监控

const {watch} = require('gulp');
watch('src/css/*',{
  delay: 1000,
},function(cb){
  console.log('css被修改了');
  cb();
});

使用gulp命令后，会实时监控目标文件

使用Ctrl+c退出监控

三、实用模板

下载需要的插件

const {series, src, dest, watch} = require('gulp');//导出我们需要的模板
const htmlClean = require('gulp-htmlclean');//压缩html代码的插件
const less = require('gulp-less');//处理less样式的代码
const cleanCss = require('gulp-clean-css');//压缩css代码的插件
const stripDebug = require('gulp-strip-debug');//去除js中用来调试的代码语句
const uglify = require('gulp-uglify');//压缩js代码的插件
const imgMin = require('gulp-imagemin');//压缩图片的插件
const connect = require('gulp-connect');//服务器插件

const folder = {
  src:'src/',
  dist:'dist/'
}
function html(){
  return src(folder.src+'html/*')
    .pipe(htmlClean())
    .pipe(dest(folder.dist+'html/'))
    .pipe(connect.reload());//热更新
}
function css(){
  return src(folder.src+'css/*')
    .pipe(less())
    .pipe(cleanCss())
    .pipe(dest(folder.dist+'css/'))
    .pipe(connect.reload());
}
function js(){
  return src(folder.src+'js/*')
    .pipe(stripDebug())
    .pipe(uglify())
    .pipe(dest(folder.dist+'js/'))
    .pipe(connect.reload());
}
function images(){
  return src(folder.src+'images/*')
   	.pipe(imgMin())
    .pipe(dest(folder.dist+'images/'))
}
function server(cb){
  connect.server({
    port: '1573', //端口
    livereload: true //自动刷新
  });
}

watch(folder.src+'html/*',function(cb){//监控文件
  html();
  cb();
});
watch(folder.src+'css/*',function(cb){
  css();
  cb();
});
watch(folder.src+'js/*',function(cb){
  js();
  cb();
});
exports.default = series(html,css,js,images,server);//依次执行方法

创建src文件，里面为我们的项目文件


运行命令后即会生成打包后的项目，并打开我们的服务器，并且监控文件我们项目的文件，实现文件更新，网页刷新。