Gulp和Grunt

感觉来说这两个都没webpack好用，Gulp服务器那有点麻烦，其他的还好，Grunt教程说国内用的不多，简单的记录一下学习过程

Gulp

//引入
let gulp = require('gulp')
const jshint = require('gulp-jshint')
//定义你的任务
// Did you forget to signal async completion?
//1.调用done
// 2.将任务的回调函数用async声明，所有语句用await
// // gulp.task('default',async function () {
// //   await console.log('1')
// // })
// 3.流
 gulp.task('jshint',function (done) {
   return gulp.src('src/js/*.js')
     .pipe(jshint({
       esversion:6
     }))
     .pipe(jshint.reporter('default'))
 })
 gulp.task('lessTask',() => //右边一句话默认返回 简写
   gulp.src('src/less/*.less')
    .pipe(less())
    .pipe(gulp.dest('src/css'))
)
//配置默认任务
 gulp.task('default', gulp.series('jshint', 'lessTask'));
 
 connect.server({
                  root : 'dist/',//提供服务的根路径
                  livereload : true,//是否实时刷新
                  port : 5000//开启端口号
             });
             // 自动开启链接
             open('http://localhost:5000');//npm install open --save-dev
             // 监视目标文件
            gulp.watch('src/js/*.js', ['js']);
            gulp.watch(['src/css/*.css', 'src/css/*.less'], ['cssMin', 'less']);

livereload.listen();
 //监视指定的文件, 并指定对应的处理任务，这个每个都要写

Grunt

module.exports = function(grunt) {

  // 初始化配置grunt任务
  grunt.initConfig({
    concat: {
      options: { //可选项配置
        separator: ';'   //使用;连接合并
      },
      build: { //此名称任意
        src:  ["src/js/*.js"],  //合并哪些js文件
        dest: "build/js/built.js" //输出的js文件
      }
    },
    pkg : grunt.file.readJSON('package.json'),
    uglify : {
      options: {  //不是必须的
        banner: '/*! <%= pkg.name %> - v<%= pkg.version %> - ' +
          '<%= grunt.template.today("yyyy-mm-dd") %> */'
      },
      build: {
        files: {
          'build/js/built.min.js': ['build/js/built.js']//前面是名，后面是位置，找的是合并后的文件位置
        }
      }
    },
    jshint : {
      options: {
        jshintrc : '.jshintrc' //指定配置文件
      },
      build : ['Gruntfile.js', 'src/js/*.js'] //指定检查的文件
    },
    cssmin:{
      options: {
        shorthandCompacting: false,
        roundingPrecision: -1
      },
      build: {
        files: {
          'build/css/output.min.css': ['src/css/*.css']
        }
      }
    },
    watch : {
      scripts : {
        files : ['src/js/*.js', 'src/css/*.css'],
        tasks : ['concat', 'jshint', 'uglify', 'cssmin'],
        options : {spawn : false}//变量更新   true：全量更新
      }
    }
  });

  // grunt任务执行加载对应任务的插件。
   grunt.loadNpmTasks('grunt-contrib-concat');
   grunt.loadNpmTasks('grunt-contrib-uglify');
   grunt.loadNpmTasks('grunt-contrib-jshint');
   grunt.loadNpmTasks('grunt-contrib-cssmin');
   grunt.loadNpmTasks('grunt-contrib-watch');
  // 默认被执行的任务列表。注册grunt默认任务，执行前面的后面的自动开启
   grunt.registerTask('default', ['concat', 'uglify', 'jshint' , 'cssmin' , 'watch']);
  //注册一个任务myWatch
   grunt.registerTask('myWatch' , ['default' , 'watch'])
  //grunt就可以执行

};