grunt

自动化工具，构建转换不被支持的特性

NPM Script 是实现自动化构建工作流最简的方式

script:{
    build: 'sass',
  //  preserve: 'yarn build',  // pre 是指在build 执行之前需要执行分命令
    serve:'browser-sync',  // 自动同步到浏览器
    start: 'run-p build serve' // run-p 表示先执行 run 命令在执行 serve 命令，依次执行。
    
    
}

grunt gulp fis

grunt 的基本使用

//   gurnt 的入口文件
//  用来定义一些需要grunt 自动执行的任务
//  需要导出一个函数
//  此函数接收一个 grunt 的形参，内部提供创建任务时可以用到的API

module.exports = (grunt) => {
  grunt.registerTask("foo", () => {
    console.log("hello gruntsss");
  });
  grunt.registerTask("bar", "任务描述", () => {
    // 使用yarn gurnt --help 时会显示任务描述
    console.log("other task");
  });
  // grunt.registerTask('default', ()=>{
  //   // 使用 default 为默认名字， 执行grunt 时不需要加名称就可以默认执行
  //   console.log('default')
  // })
  grunt.registerTask('default',['foo','bar'])
  // 异步执行
  grunt.registerTask('async-task', ()=>{
    setTimeout(() => {
      console.log('异步执行')
    }, 100);
  })
  grunt.registerTask('async-task', function(){
    const done  = this.async()
    setTimeout(() => {
      console.log('异步执行')
      done()
    }, 1000);
  })
};

grunt 的配置方法

 module.exports = grunt => {
   grunt.initConfig({
     foo:{
       bar: 123
     }
   })
   gruntRegisterTask('foo',()=>{
     console.log(grunt.config('foo.bar'))
   })
 }

grunt 多目标任务

 module.exports = grunt => {
  grunt.initConfig({
    build:{
      css:1,
      js:2
    }
  })
  // 多目标模式， 可以让任务根据配置形成多个子任务
  grunt.registerMultiTask('build',function(){
    console.log(`'target': ${this.target}, 'data':${this.data}`)
  })
 }

grunt 插件使用

// 先安装 sass 模块
const sass = require('sass')
const loadGruntTasks = reuqire('load-grunt-tasks')  // 自动加载所有的 grunt 任务
 module.exports = grunt => {
  grunt.initConfig({
    sass:{
      options: {
        implementation: sass
      },
      main:{
        files:{
          'dist/css/main.css':'src/scss/main.scss'
        }
      }
    }
  })
  // grunt.loadNpmTasks('grunt-sass')
  loadGruntTasks('grunt')  // 自动加载所有的 grunt 插件中的任务
 }