gulp 是基于 node 实现 Web 前端自动化开发的工具，利用它能够极大的提高开发效率。找到“压缩”、“组合”、“编译”这些规律，编写 gulp 配置代码，让 gulp 自动执行这些“重复工作”。

安装gulp
npm install -g gulp
gulpfile.js
重点语法：
gulp.task(name, fn) - 定义任务，第一个参数是任务名，第二个参数是任务内容。
gulp.src(path) - 选择文件，传入参数是文件路径。
gulp.dest(path) - 输出文件
gulp.pipe() - 管道，你可以暂时将 pipe 理解为将操作加入执行队列
Demo

//gulp4.0
var gulp = require('gulp')
var uglify = require('gulp-uglify')
gulp.task('script', function(done) {
    gulp.src('js/*.js')
        .pipe(uglify())
        .pipe(gulp.dest('dist/js'))
        done()
})
gulp.task('auto', function (done) {
    gulp.watch('js/*.js',gulp.series('script'))
    done();
})
gulp.task('default', gulp.series('script', 'auto'))

grunt
安装grunt
npm install -g grunt-cli
Gruntfile.js
重点语法：
grunt.initConfig({})-任务（task）配置和目标（target）
grunt.registerTask-注册执行
grunt.loadNpmTasks-加载插件
Demo

module.exports = function(grunt) {
  grunt.initConfig({
      less: {
          development: {
              files: { "assets/css/result.css": "assets/less/test.less"  }
          },
          production: {
              options: {compress : true},
              files: {"assets/css/result.min.css": "assets/less/test.less" }
          }
      }
  });
  // 插件使用前加载
  grunt.loadNpmTasks('grunt-contrib-less');
  // 开发环境 CMD 窗口请使用 grunt lessDev
  grunt.registerTask('lessDev', ['less:development']);
  // 线上环境 CMD 窗口请使用 grunt lessPro
  grunt.registerTask('lessPro', ['less:production']);
};

对比
grunt/gulp是任务执行程序，运行机制：
【遍历源文件】-【匹配规则】-【打包】
做不到按需加载，对打包的资源，是否用到，打包过程不关心。

webpack是模块打包程序，运行机制：
【入口】-【模块依赖加载】-【依赖分析】-【打包】
在加载、分析、打包的过程中，可以针对性的做一些解决方案。