Grunt

安裝Grunt-cli：

cnpm install -g grunt-cli

新建項目文件夾，生成package.json：

cnpm init -y

安裝 Grunt 和所須要的插件

• 合併文件：grunt-contrib-concat
• 語法檢查：grunt-contrib-jshint
• Scss 編譯：grunt-contrib-sass
• 壓縮文件：grunt-contrib-uglify
• 監聽文件變更：grunt-contrib-watch
• 創建本地服務器：grunt-contrib-connect

安裝grunt：

cnpm install 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');

};