grunt基礎配置

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】