js: 自动化构建工具 grunt

中文网

初次使用

链接

运行grunt报错

TypeError: grunt.tasks is not a function

要正确安装依赖

yarn add grunt grunt-contrib-jshint grunt-contrib-nodeunit grunt-contrib-uglify -D

api使用

grunt.task.registerTask 创建任务

grunt.loadNpmTasks 加载 Grunt 插件和任务

grunt.initConfig 初始化配置数据

grunt.registerMultiTask 执行多任务

插件使用

–grunt-contrib-clean

// 在配置文件中加载插件
grunt.loadNpmTasks('grunt-contrib-clean'); 

配置插件

然后执行对应的命令

grunt clean

–grunt-sass
转换sass文件
–grunt-babel
转换js语法
–grunt-contrib-watch
监听文件变化然后就可以执行任务

gulp运行报错

The “path” argument must be of type string. Received null

后面可能发现是语法错误少了逗号
也有可能是使用grunt-sass需要使用引入fibers

参考示例

/Gruntfile.js

const sass = require('node-sass');
const Fiber = require('fibers');



module.exports = function(grunt) {
  
  // Project configuration.
  let obj = grunt.initConfig({

    pkg: grunt.file.readJSON('package.json'),
    concat: {
      // 这里是concat任务的配置信息。
    },
    uglify: {
      options: {
        banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
      },
      build: {
        src: 'src/<%= pkg.name %>.js',
        dest: 'build/<%= pkg.name %>.min.js'
      }
    },
    // 配置信息
    foo: {
      bar: 123
    },
    // 插件配置信息
    clean: {
      temp: "temp/**"
    },
    build: {
      css: '1',
      js: '2',
      options: {
        'foo': 'bar'
      }
    },
    sass: {
        options: {
            implementation: sass,
            fiber: Fiber,
            sourceMap: true
        },
        dist: {
            files: {
                'dist/main.css': 'src/sass/main.scss'
            }
        }
    },
    babel: {
      options: {
        sourceMap: true,
        presets: ['@babel/preset-env']
      },
      main: {
        files: {
          'dist/app.js': 'src/app.js'
        }
      }
    },
    watch: {
      scripts: {
        files: ['**/*.js'],
        tasks: ['babel'],
        options: {
          spawn: false,
        },
      },
    }
  });

  require('load-grunt-tasks')(grunt); 

  // 获取配置信息
  console.log(JSON.stringify(obj))
  console.log(grunt.config('foo.bar'))

  // 加载包含 "uglify" 任务的插件。
  grunt.loadNpmTasks('grunt-contrib-uglify');

  grunt.loadNpmTasks('grunt-contrib-clean');

  grunt.loadNpmTasks('grunt-contrib-watch');

  // 默认被执行的任务列表。
  grunt.registerTask('foo', () => {
    console.log('foo')
  })
  grunt.registerTask('bad', () => {
    console.log('bad')
    return false // 标记任务失败，失败后不再往后执行
  })
  grunt.registerTask('bar', () => {
    console.log('bar')
  })
  grunt.registerTask('default', ['sass','babel', 'foo', 'bar', 'watch']); // 'foo','bad', 'bar'
  
  grunt.registerMultiTask('build', function () {
    console.log('build---')
    console.log(this.options())
    console.log('build', this.target, this.data)
  })
};