使用grunt构建前端项目

1. grunt构建工具是基于nodejs上的，所以在使用之前一定要先安装好nodejs

2. 安装好nodejs后，node -v查看node版本 npm-v 查看npm版本信息

3. 在需要用到的项目文件下安装grunt，安装命令 ：npm install grunt ，安装之后无法执行grunt命令，需安装一个全局的grunt-cli ( grunt命令操作 ) 安装命令：npm install -g grunt-cli，再使用 grunt --version 查看grunt-cli版本

4.将需要使用到的插件通过npm 命令安装到本地

5. 安装完成之后，首先需新建一个package.json文件，可以选择在项目根目录下手动创建package.json的文件，也可以选择使用npm init命令进行创建：

 

 

当通过npm install grunt-contrib-cssmin -save-dev 命令时，将会把grunt-contrib-cssmin 添加到package.json中的devDependencies中

其次还需要一个Gruntfile.js的文件，其中配置信息如下：(使用各种插件)

 

module.exports = function (grunt) {

　　//任务配置，所有插件的配置信息

　　grunt.initConfig({

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

　　　　uglify: {//uglify压缩插件的配置信息

　　　　　　options: {//压缩之后,压缩文件中的描述信息

　　　　　　　　striBanners: true,

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

　　　　　　},

　　　　　　build: {

　　　　　　　　//目标文件

　　　　　　　　src: 'js/index.js',

　　　　　　　　//压缩后的文件

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

　　　　　　}

　　　　},

　　　　jshint: {//使用jshint查看js代码中出现的错误，以及可能存在的一些问题

　　　　　　build: ['Gruntfile.js', 'js/index.js'],

　　　　　　options: {

　　　　　　　　jshintrc: '.jshintrc'

　　　　　　}

　　　　},

　　　　

　　　　watch: {//使用watch事实监控文件，实现自动化

　　　　　　build: {

　　　　　　　　files: ['js/index.js', 'css/index.css'],

　　　　　　　　tasks: ['jshint', 'uglify'],

　　　　　　　　options: {spawn: false}

　　　　　　}

　　　　}，

　　cssmin: {

　　　　options ：{

　　　　　　shorthandConpacting:false,

　　　　　　roundingPrecision:-1

　　　　}，

　　　　target : {

　　　　　　files :{

　　　　　　　　'合并后.css':['合并1.css','合并2.css','合并3.css']

　　　　　　}

　　　　}

　　}

　　});

　　//使用grunt插件

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

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

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

　　//输入grunt命令时需要做哪些(顺序)

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

};

 

常用的几种grunt插件:

• Contrib-jshint——javascript语法错误检查；
• Contrib-watch——实时监控文件变化、调用相应的任务重新执行；
• Contrib-clean——清空文件、文件夹；
• Contrib-uglify——压缩javascript代码
• Contrib-copy——复制文件、文件夹
• Contrib-concat——合并多个文件的代码到一个文件中
• Contrib-cssmin——压缩css代码
• karma——前端自动化测试工具

grunt.initConfig方法:

用于模块配置，它接受一个对象作为参数。该对象的成员与使用的同名模块一一对应。

每个目标的具体设置，需要参考该模板的文档。就cssmin来讲，minify目标的参数具体含义如下：

expand：如果设为true，就表示下面文件名的占位符（即*号）都要扩展成具体的文件名。

cwd：需要处理的文件（input）所在的目录。

src：表示需要处理的文件。如果采用数组形式，数组的每一项就是一个文件名，可以使用通配符。

dest：表示处理后的文件名或所在目录。

ext：表示处理后的文件后缀名。

 

grunt常用函数说明：

grunt.initConfig：定义各种模块的参数，每一个成员项对应一个同名模块。grunt.initConfig({});

grunt.loadNpmTasks：加载完成任务所需的模块。grunt.loadNpmTasks("grunt-contrib-jshint");

grunt.registerTask：定义具体的任务。第一个参数为任务名，第二个参数是一个数组， 表示该任务需要依次使用的模块('defualt',['uglify','cssmin','jshint','watch']);

执行命令

 

在窗口执行命令 grunt