grunt搭建自动化的前端开发环境-学习总结

今天跟着大神王福鹏的博客，学了下grunt的使用，大神就是大神，跟着博客学习，很快就入门，动手练了一下，例子都跟着做了一遍。

总体有几个体会：

　　之前看过一阵子node的书籍，看的时候对于node的 npm下载有点囫囵吞枣的感觉，学完其实没有理解，知道是用npm install 来下载，但对于 package.json 文件的重要性及便捷性没有切身认识到，通过这个例子，对于好像又燃起了node的学习热情，及grunt 插件的研究。

学了几点也总结一下：

第一安装 grunt:

　　1、必须安装node环境：官网下载，傻瓜式点击就可安装  安装完成  控制台  node _v 看到版本号即为成功。

　　2、安装 grunt_cli,及grunt 的命令行工具，所谓命令行工具，我理解就是 要在控制台运行 grunt 及相关命令，必须先安装 grunt_cli 工具才能识别grunt 命令，就像安装node之后才能在全局识别 npm install 命令一样。

　　3、安装完grunt_cli 之后就可以安装grunt 工具了，grunt是一系列插件的载体，有了grunt 才可以配置相关的插件，来实现前端的相关构建功能；grunt 有几个重要的文件：

　　　　Gruntfile.js 文件：配置grunt 插件的js文件

　　　　grunt.initConfig:配置插件信息

　　　　grunt.loadNpmTasks("XXXX"): 加载配置后的插件；

　　　　grunt.registerTask('default', ['jshint','csslint','uglify','watch']):及在运行grunt命令后，要默认执行的插件。

　

//任务配置，所有插件的配置信息
module.exports = function(grunt) {

  //任务配置，所有插件的配置信息
  grunt.initConfig({
  	//sdjfksdfl
    pkg: grunt.file.readJSON('package.json'),
    uglify: {
      options: {
      	stripBanners:true,
        banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
      },
      build: {
        src: 'src/test.js',
        dest: 'build/<%= pkg.name %>-<%=pkg.version%>.js.min.js'
      }
    },
    jshint:{
    	//build:['Gruntfile.js','src/*.js'],
    	wsp:["Gruntfile.js"],
    	wsq:["src/*.js"],
    	options:{
    		jshintrc:'.jshintrc'
    	}	
    },
    csslint:{
    	build:['src/*.css'],
    	options:{
    		csslintrc:'.csslintrc'
    	}	
    },
    watch:{
    	build:{
    		files:["src/*.js","src/*.css"],
    		tasks:["jshint","csslint"],
    		options:{spawn:false}
    	}
    }
  });

  // 加载包含 "uglify" 任务的插件。

  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-jshint');
  grunt.loadNpmTasks('grunt-contrib-csslint');
  grunt.loadNpmTasks('grunt-contrib-watch');


 //告诉grunt当我们在终端输入grunt 时需要做些什么（注意先后顺序）。
  grunt.registerTask('default', ['jshint','csslint','uglify','watch']);

};

　　

　4、学习了几个实用插件：

　　     uglify：压缩js 代码

　　　　jshint： js代码检查，这个依赖于配置项 .jshintrc文件配置检查项

　　　　csslint:  css代码检查，这个依赖于配置项.csslintrc文件配置检查项

　　　　watch: 代码自动监控，有这个才实现检查的“自动化”。

      其他插件可以去grunt(中文)官网去查：http://www.gruntjs.net/

 

 5：npm install 下载插件时，如果该目录下package.json 中没有所下载模块的配置时，后面加 --save -dev ,下载后可所下载模块就写入到package.json中了，这样复制所下载模块，即把 package.json copy 到其他目录 后运行 npm install 即可实现模块的复制。

-------------------------------

最后附上大神的博客园该教程地址：

　　http://www.cnblogs.com/wangfupeng1988/p/4561993.html#undefined

 

转载于:https://www.cnblogs.com/wangshiping/p/5271023.html