grunt学习

grunt  依赖 Node.js 因此在安装以前确保你安装了 Node.js。而后开始安装 Grunt。

 

安装grunt命令行grunt-cli

安装Grunt-cli，这样你就能够使用 grunt 命令来执行某个项目中的 Gruntfile.js 中定义的 task 。可是要注意，Grunt-cli 只是一个命令行工具，用来执行，而不是 Grunt 这个工具自己。

 

npm install grunt-cli -g

须要注意，由于使用 －g 命令会安装到全局，可能会涉及到系统敏感目录，若是用 Windows 的话，可能须要你用管理员权限，若是用 OS X ／ Linux 的话，你可能须要加上 sudo 命令。

grunt -version 测试是否安装成功

生成package.json文件

cd C:\webApp 切换到某个文件夹下

npm init 会给出不少提示信息，输入值便可，最终就会生成文件

 

安装grunt 和所须要的插件

合并文件：grunt-contrib-concat

语法检查：grunt-contrib-jshint

Scss 编译：grunt-contrib-sass

压缩文件：grunt-contrib-uglify

监听文件变更：grunt-contrib-watch

创建本地服务器：grunt-contrib-connect

 

npm install grunt --save-dev

 

查看package.json文件，会发现

"devDependencies": {

"grunt": "^0.4.5"

}

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

 

 

gruntFile.js

package.json应当放置于项目的根目录中，与Gruntfile在同一目录中

module.exports = function (grunt) {

    var sassStyle = 'expanded';

    grunt.initConfig({

        pkg: grunt.file.readJSON('package.json'),

        sass: {},

        uglify: {

            //options: {

            //    banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'

            //},

            //build: {

            //    src: 'src/<%= pkg.name %>.js',

            //    dest: 'build/<%= pkg.name %>.min.js'

            //}

        },

        concat: {

            options: {

                separator: ';',

            },

            dist: {

                src: ['a.js', 'b.js'],

                dest: './global.js',

            },

        }

    });

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

    //grunt.registerTask('outputcss', ['sass']);//sass编译

    //grunt.registerTask('default', ['uglify']);

    grunt.registerTask('concatTask', ['concat']);

}

grunt concatTask 执行