gulp的简单用法

gulp的简单用法:官网（https://gulpjs.com）

什么是gulp？

　　gulp是前端开发过程中一种基于流的代码构建工具，是自动化项目的构建利器；它不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成；使用它，不仅可以很愉快的编写代码，而且大大提高我们的工作效率。

　　gulp是基于Nodejs的自动任务运行器， 它能自动化地完成 前端代码的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成，并监听文件在改动后重复指定的这些步骤。

使用

1.尽量安装到项目中：npm install --save-dev gulp
2.配置项目中的package.json文件，在scripts中添加gulp命令，如下，启动命令未：npm run gulp

{
  "dependencies": {
    "gulp": "^4.0.2",
    "gulp-less": "^4.0.1"
  },
  "scripts": {
    "gulp": "gulp"
  }
}

3.在项目中新建gulpfile.js文件,样本如下：

function defaultTask(cb) {
  // place code for your default task here
  cb();
}

exports.default = defaultTask // 一定要记得exports.default，不然程序运行报错

接下来我们做个小demo：
1.在当前项目的根目录下新建src文件夹，将src文件夹下的所有文件都打包都build文件夹下。（build是自动生成的）

在gulpfile.js中添加如下代码

const { series,src,dest } = require('gulp');

const _defaults = series((cb)=>{
    src(['src/**/*'])
    .pipe(dest('build/'));
    cb();
})

exports.default = _defaults;

运行npm run gulp；结果会在项目的根目录下创建一个build文件夹，里面的文件和src文件夹下的文件一摸一样

构建前删除上次构建的文件
安装del :npm install del

在gulpfile.js中添加如下代码

const del = require('del');
...
const _del= (cb)=>{
    del.sync(['build/']);
    cb();
}

const _defaults = series((cb)=>{
    src(['src/**/*'])
    .pipe(dest('build/'));
    cb();
})
...

exports.default =parallel(_del,_default);

此时运行npm run gulp就可以实现删除之前的build后再重新构建

 

gulp还支持多个组合依次运行：

const { series ,src,dest } = require('gulp');

const doing = (cb)=>{
    setTimeout(()=>{
        console.log('doing!');
        cb();
    }) 
}
const complete= (cb)=>{
    console.log('complete');
    cb();
}
exports.default = series(doing ,complete);

运行结果，等doing执行完成后,然后再执行后面的complete方法：

[17:50:59] Using gulpfile E:\MyProject\node\gulp\building\gulpfile.js
[17:50:59] Starting 'default'...
[17:50:59] Starting '_less'...
doing!
[17:50:59] Finished '_less' after 9.75 ms
[17:50:59] Starting '_defaults'...
complete
[17:50:59] Finished '_defaults' after 224 μs
[17:50:59] Finished 'default' after 12 ms

同样也支持多个组合同时运行

const { parallel  ,src,dest } = require('gulp');

const doing = (cb)=>{
    setTimeout(()=>{
        console.log('doing!');
        cb();
    })
}
const complete= (cb)=>{
    console.log('complete');
    cb();
}
exports.default = parallel (doing,complete);

运行结果，由于doing有定时器，所以会先输出complete，再输出doing：

[17:52:56] Using gulpfile E:\MyProject\node\gulp\building\gulpfile.js
[17:52:56] Starting 'default'...
[17:52:56] Starting '_less'...
[17:52:56] Starting '_defaults'...
complete
[17:52:56] Finished '_defaults' after 7.93 ms
doing!
[17:52:56] Finished '_less' after 9.54 ms
[17:52:56] Finished 'default' after 11 ms

 

拓展:
gulp-clean-css:压缩css
gulp-autoprefixer:给css添加浏览器前缀
gulp-less:将less转成css

下面是一个简单的小例子,实现对less操作

const {parallel,dest,src } = require('gulp');
const del = require('del');
const less = require('gulp-less');
const autoprefixer = require('gulp-autoprefixer');
let cleanCSS = require('gulp-clean-css');

const _del= (cb)=>{
    del.sync(['build/']);
    cb();
}

const _less = (cb)=>{
    src('src/style/*.less')
    .pipe(less()) // less转成css
    .pipe(cleanCSS()) // 压缩css
    .pipe(autoprefixer({ // 自动补齐css浏览器前缀
        cascade: false,
        browsers:['last 5 version'],
    }))
    .pipe(dest('build/style/'))
    cb();
}

const _default = parallel((cb)=>{
    src(['src/**/*','!src/**/*.less'])
    .pipe(dest('build/'))
    cb();
},_less)


exports.default =parallel(_del,_default);