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']
    }
  });

  grunt.loadNpmTasks('grunt-contrib-sass');
  grunt.loadNpmTasks('grunt-contrib-concat');
  grunt.loadNpmTasks('grunt-contrib-jshint');
  grunt.loadNpmTasks('grunt-contrib-uglify');

  grunt.registerTask('outputcss',['sass']);
  grunt.registerTask('concatjs',['concat']);
  grunt.registerTask('compressjs',['concat','jshint','uglify']);
  grunt.registerTask('default');

};

其中注册了一个 compressjs 任务 grunt.registerTask('compressjs',['concat','jshint','uglify']); 意思就是依次执行 合并、检查、压缩 任务。咱们把刚生成的 global.js 文件删掉，在命令行执行 grunt compressjs 任务，结果 jshint 报错了：

grunt 遇到错误就退出了，就无法继续执行下面的任务。经过错误提示能够发现，是由于 concat 里面设置的参数——在两个文件合并间插入一个“;”——这原本是为了防止两个文件之间相互干扰设置的，结果没法被 jshint 验证经过，咱们能够删掉这个参数，或者设置 jshint 验证这两个文件，而后再进行合并。

为了方便，我删掉了这个参数。再执行一下，成功了，项目目录里面多了 global.js 和 global.min.js 文件。

小明看到这里，痛哭流泪，本身每次打开好几个网站，辛苦挨个粘贴复制新建，没想到输入一条命令就能够了。不过让他更伤心的还在后面，连这些命令都不用重复输入。

咱们能够经过 watch 来监听文件变更，当文件变化了（咱们编写保存了），自动执行某些任务。此处为了节约版面，我连自动刷新的任务一块写上去。根据 grunt-contrib-watch 和 grunt-contrib-connect 这俩文档，咱们能够写出下面的任务：

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: {
      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',['sass','concat','jshint','uglify','connect','watch']);
  grunt.registerTask('default');

};

添加了 connect 任务，用来新建一个本地服务器，以当前目录做为服务器根目录，而后添加 watch 任务，监听 Scss 文件变更，若是变了，执行一下 sass 任务，监听那俩 JS，若是变了，执行 合并、检查、压缩 任务，监听 html、css、js 文件，若是变更，livereload 自动刷新打开的页面。

而注册的 watchit task 就是咱们的终极 task，第一次执行，先编译 sass、再合并、检查、压缩、开启服务器、监听文件变更。咱们执行一下 grunt watchit 就能够看到效果了，你能够修改一下 scss 文件，把字体设置大一点，切换到浏览器的时候，就看到了实时刷新效果。也能够修改一下 JS，故意改错一下，会发现 jshint 会提示你出错了。

看到这里，小明和小红相拥而泣。。。。

项目文件传输与协做

项目开发完成以后，每每须要 push 到 Github 或者上传 FTP 等。或许其余人会接手你的项目继续开发，或者你会换台电脑进行开发。

当小明用 git 上传 Github 的时候，傻了眼，项目里 node_modules 文件夹下面的东西要十几M呢，这比我项目自己还大，上传下载都不方便。

其实这些插件和 grunt 不须要上传，由于有 package.json 这个文件记录了你这个项目中依赖的 grunt 插件，你只须要上传这个文件便可。下载下来以后，只须要在这个项目文件夹下面，输入命令 npm install，NPM 会自动读取 package.json 文件，将 grunt 和有关插件给你下载下来，很方便的。

也不须要在本地上传的时候删除，用 git 的话，能够使用 .gitignore 文件来过滤掉这个文件夹，禁止 git 追踪。

总结与扩展阅读

Grunt 就是这样一种任务自动运行器，应用好它能够减轻不少没必要要的人工操做，只须要专一 coding 就能够。甚至还有Grunt 插件帮你自动完成 CSS Sprite，更多功能还须要你本身去摸索。

新手看完本文，再看一下 Grunt 官方文档 应该没有太多疑问了，那就再看一遍把。固然也有中文版。

除了 Grunt 以外，同类型比较火的还有 Gulp 这个工具。其实两个东西的功能是同样的，只不过是任务配置 JS 的语法不一样，Gulp 的 Gulpfile.js 的写法更加通俗易懂，上手更快。可是 Gulp 的插件等感受不如 Grunt，Grunt 官方提供了一些常见的插件，知足大部分平常工做，并且可靠值得信赖，而 Gulp 好像没有太多官方出品，各类插件不太规范。简单的说，Grunt 和 Gulp 就像 iPhone 与 Android 同样，一个质量高学习难一点，一个学起来简单可是有点那个，你懂得。

此外，能够看一些高手的项目，你会发现更好的 Grunt 用法，好比 Yeoman 生成的项目，就有很完善的 Grunt 任务和插件，此外，jQuery 等也用 Grunt 进行打包，这些 Grunt 文件你均可以查看研究一下他们的写法和用法，受益不浅。

最后，若是你懒得跟着文章一点点的配置示例项目，你也能够跳转到示例项目的 grunt 分支，这里面是我配置好的，你须要先 npm install 而后就能够直接执行那些命令。