Grunt

Posted zhoulixue

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Grunt相关的知识,希望对你有一定的参考价值。

安装Grunt-cli:

cnpm install -g grunt-cli

新建项目文件夹,生成package.json:

cnpm init -y

安装 Grunt 和所需要的插件

安装grunt:

cnpm instal grunt --save-dev

安装所需插件:

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

配置 Gruntfile.js 的语法

与 Grunt 有关的主要有三块代码:任务配置代码插件加载代码任务注册代码

任务配置代码就是调用插件配置一下要执行的任务和实现的功能,插件加载代码就是把需要用到的插件加载进来,任务注册代码就是注册一个 task,里面包含刚在前面编写的任务配置代码。

任务配置代码

grunt.initConfig({
  pkg: grunt.file.readJSON(‘package.json‘),
  uglify: {
    options: {
      banner: ‘/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n‘
    },
    build: {
      src: ‘src/<%= pkg.name %>.js‘,
      dest: ‘build/<%= pkg.name %>.min.js‘
    }
  }
});

插件加载代码

这个就超级简单了,由于上面任务需要用到 grunt-contrib-uglify,当 grunt-contrib-uglify 安装到我们的项目之后,写下下面代码即可加载:

grunt.loadNpmTasks(‘grunt-contrib-uglify‘);

任务注册代码

插件也加载了,任务也布置了,下面我们得注册一下任务,使用:

grunt.registerTask(‘default‘, [‘uglify‘]);

当你在项目目录执行 grunt 的时候,它会执行注册到 default 上面的任务。

也就是说,当我们执行 grunt 命令的时候,uglify 的所有代码将会执行。我们也可以注册别的 task,例如:

grunt.registerTask(‘compress‘, [‘uglify:build‘]);

如果想要执行这个 task,我们就不能只输入 grunt 命令了,我们需要输入 grunt compress 命令来执行这条 task,而这条 task 的任务是 uglify 下面的 build 任务,也就是说,我们只会执行 uglify 里面 build 定义的任务,而不会执行 uglify 里面定义的其他任务。

配置 Gruntfile.js

先从简单的入手,我们先来配置一下编译 Scss 文件的 task。先新建一个 Gruntfile.js 文件,把大体的配置结构复制进去:

module.exports = function(grunt) {

  var sassStyle = ‘expanded‘;

  grunt.initConfig({
    pkg: grunt.file.readJSON(‘package.json‘),
    sass: {

    }
  });

  grunt.loadNpmTasks(‘grunt-contrib-sass‘);

  grunt.registerTask(‘outputcss‘,[‘sass‘]);
  grunt.registerTask(‘default‘);

};

最终结果:

module.exports = function(grunt) {

  var sassStyle = ‘expanded‘;

  grunt.initConfig({
    pkg: grunt.file.readJSON(‘package.json‘),
    sass: {
       output : {
        options: {
          style: sassStyle
        },
        files: {
          ‘./style.css‘: ‘./scss/style.scss‘
        }
      }
    },
    concat: {
      options: {
        separator: ‘‘,
      },
      dist: {
        src: [‘./src/plugin.js‘, ‘./src/plugin2.js‘],
        dest: ‘./global.js‘,
      },
    },
    uglify: {
      compressjs: {
        files: {
          ‘./global.min.js‘: [‘./global.js‘]
        }
      }
    },
    jshint: {
      all: [‘./global.js‘]
    },
    watch: {
      scripts: {
        files: [‘./src/plugin.js‘,‘./src/plugin2.js‘],
        tasks: [‘concat‘,‘jshint‘,‘uglify‘]
      },
      sass: {
        files: [‘./scss/style.scss‘],
        tasks: [‘sass‘]
      },
      livereload: {
          options: {
              livereload: ‘<%= connect.options.livereload %>‘
          },
          files: [
              ‘index.html,
              ‘style.css‘,
              ‘js/global.min.js‘
          ]
      }
    },
    connect: {
      options: {
          port: 9000,
          open: true,
          livereload: 35729,
          // Change this to ‘0.0.0.0‘ to access the server from outside
          hostname: ‘localhost‘
      },
    server: {
        options: {
          port: 9001,
          base: ‘./‘
        }
      }
    }
  });

  grunt.loadNpmTasks(‘grunt-contrib-sass‘);
  grunt.loadNpmTasks(‘grunt-contrib-concat‘);
  grunt.loadNpmTasks(‘grunt-contrib-jshint‘);
  grunt.loadNpmTasks(‘grunt-contrib-uglify‘);
  grunt.loadNpmTasks(‘grunt-contrib-watch‘);
  grunt.loadNpmTasks(‘grunt-contrib-connect‘);

  grunt.registerTask(‘outputcss‘,[‘sass‘]);
  grunt.registerTask(‘concatjs‘,[‘concat‘]);
  grunt.registerTask(‘compressjs‘,[‘concat‘,‘jshint‘,‘uglify‘]);
   grunt.registerTask(‘watchit‘,[‘concat‘,‘jshint‘,‘uglify‘,‘connect‘,‘watch‘]);
  grunt.registerTask(‘default‘);

};

 

以上是关于Grunt的主要内容,如果未能解决你的问题,请参考以下文章

grunt整合版30分钟学会使用grunt打包前端代码

在TypeScript中保存代码后是否可以运行grunt命令?

正确代码之-grunt

Grunt混淆代码报 XML DOMParser 错误

grunt的使用

Grunt教程——初涉Grunt