grunt基础配置

Posted 2020-09-19 猫不白

grunt基础配置

要使用grunt来管理项目，一般需要如下的几个步骤：

1. 安装grunt命令行工具grunt-cli
2. 在项目中安装grunt
3. 安装grunt插件
4. 建立并配置Gruntfile.js

安装grunt命令行工具

npm install -g grunt-cli

在项目中安装grunt

npm install grunt --save-dev

安装完成后，可以在package.json文件中看到devDependencies中加入了grunt包

  "devDependencies": {
    "grunt": "^1.0.1"
  }

安装grunt常用插件

插件名
合并文件：grunt-contrib-concat
语法检查：grunt-contrib-jshint
Scss 编译：grunt-contrib-sass
压缩文件：grunt-contrib-uglify
监听文件变动：grunt-contrib-watch
建立本地服务器：grunt-contrib-connect

npm install --save-dev grunt-contrib-concat grunt-contrib-jshint grunt-contrib-sass grunt-contrib-uglify grunt-contrib-watch grunt-contrib-connect

建立并配置Gruntfile.js

一个基本的压缩js文件的配置文件如下,在项目路径下运行grunt命令，即可执行压缩

• 以下方式会将压缩文件以单独形式压缩
• 取消ext注释，压缩文件将更改后缀为min.js
• 注意加上expand配置（否则提示所有文件为空）

module.exports = function(grunt) {
  // Project configuration.
  grunt.initConfig({
    pkg: grunt.file.readJSON(\'package.json\'),
    uglify: {
      options: {
        banner: \'/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\\n\'
      },
      build: {
        expand:true,
        //set source folder
        cwd: \'public/js/custom/\',
        src: \'*.js\',
        //set destination folder
        dest: \'public/pjt/\',
        // ext: \'.min.js\'
      }
    }
  });
  // Load the plugin that provides the "uglify" task.
  grunt.loadNpmTasks(\'grunt-contrib-uglify\');
  // Default task(s).
  grunt.registerTask(\'default\', [\'uglify\']);
};

单独运行任务参考：
http://www.cnblogs.com/artwl/p/3449303.html

其他的功能可以在此基础上逐步增加。

【sylar-20170520】