grunt笔记

1.nodejs

2.安装grunt-li

cnpm install -g grunt-cli

3.创建一个网站工程目录

• package.json
  
  name:网站/系统的名字
  version：版本号
  devDependencies:开发依赖库

4.安装grunt

6.Grunt插件

7.uglify

8.jshint

进入项目所在目录：

cnpm install grunt --save-dev

“–save-dev”将所安装的保存为这个目录的开发依赖项，对应的package.json文件下的devDependencies会生成键值对。
工程目录下会生成node_modules文件夹，里面包含依赖库源文件。

5.配置Gruntfile.js

//包装函数
module.exports = function(grunt) {

    //任务配置，所有插件的配置信息
    grunt.initConfig({

        //获取 package.json 的信息
        pkg:grunt.file.readJSON('package.json'),

        //uglify配置信息
        uglify: {
            options: {
                stripBanners: true,
                banner:'/*! <%=pkg.name%>-<%=pkg.version%>.js <%= grunt.template.today("2017-07-11") %> */\n'
            },
            //压缩后的.js文件头部会有$banner 说明
            build: {
                src: 'src/test.js',
                dest: 'build/<%=pkg.name%>-<%=pkg.version%>.js.min.js'
            }
        },
//$src:压缩目标文件，dest：压缩后的.js存放目录
        //jshint插件配置信息（检查js语法错误）
        jshint: {
            build: ['Gruntfile.js','src/*.js'],
            options: {
                jshintrc: '.jshintrc'
            }
        //$build:需要被check的.js，以$.jshintrc为规范进行检查（百度.jshint配置）    
        }


    });
    //告诉grunt，需要被使用的插件
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-jshint');
    grunt.registerTask('default',['jshint','uglify']);
};

9.csslint

10.watch(真正实现自动化)

原文地址