grunt 使用实例

最新推荐文章于 2021-03-14 23:01:06 发布

原创最新推荐文章于 2021-03-14 23:01:06 发布 · 262 阅读

0 ·

CC 4.0 BY-SA版权

js 同时被 2 个专栏收录

55 篇文章

订阅专栏

html5

18 篇文章

订阅专栏

Grunt 依赖 Node.js 所以在安装之前确保你安装了 Node.js。然后开始安装 Grunt。

Grunt命令行（CLI）安装到全局环境

npm install -g grunt-cli

每次运行grunt 时，他就利用node提供的require()系统查找本地安装的 Grunt。正是由于这一机制，你可以在项目的任意子目录中运行grunt 。如果找到一份本地安装的 Grunt，CLI就将其加载，并传递Gruntfile中的配置信息，然后执行你所指定的任务

安装Grunt最新版本到项目目录中

npm install grunt --save-dev

1 文件目录

置好package.json 和 Gruntfile 文件的项目了

grunt-contrib-clean：删除文件。

grunt-contrib-compass：使用compass编译sass文件。

grunt-contrib-concat：合并文件。

grunt-contrib-copy：复制文件。

grunt-contrib-cssmin：压缩以及合并CSS文件。

grunt-contrib-imagemin：图像压缩模块。

grunt-contrib-jshint：检查JavaScript语法。

grunt-contrib-uglify：压缩以及合并JavaScript文件。

grunt-contrib-watch：监视文件变动，做出相应动作。

grunt-font-spider:生成字体，压缩字体

package.json

{
  "name": "webPage",
  "version": "0.1.0",
  "dependencies": {
    "grunt": "^1.0.2",
    "grunt-contrib-clean": "^1.1.0",
    "grunt-contrib-connect": "^1.0.2",
    "grunt-contrib-copy": "^1.0.0",
    "grunt-contrib-csslint": "^2.0.0",
    "grunt-contrib-cssmin": "^2.2.1",
    "grunt-contrib-jshint": "^1.1.0",
    "grunt-contrib-uglify": "^3.3.0",
    "grunt-contrib-watch": "^1.0.0"
  },
  "devDependencies": {
    "grunt-contrib-imagemin": "^2.0.1",
    "grunt-font-spider": "^0.1.5"
  }
}

Gruntfile.js

module.exports = function(grunt) {

  // Project configuration.
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    //删除文件
    clean: ['build/*'],
    //复制文件
    copy: {
		  main: {
		    expand: true,
		    cwd: 'src',
		    src: '**',
		    dest: 'build/'
		  },
		},
    //js语法检查
    jshint: {
			all: ['Gruntfile.js', 'src/html/js/weetgo.js']
		},
	//js压缩
    uglify: {
    	options: {
	      banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %>*/'
	    },
			my_target: {
	      files: {
	        'build/html/js/weetgo.js': ['build/html/js/weetgo.js'],
//	        'build/html/js/hammer.js': ['build/html/js/hammer.js']
	      }
	    }
	},
	//css压缩
	cssmin: {
	  options: {
	    mergeIntoShorthands: false,
	    roundingPrecision: -1
	  },
	  target: {
	    files: {
	      'build/page/css/index.css': ['build/page/css/index.css'],
	      'build/page/css/base.css': ['build/page/css/base.css'],
	    }
	  }
	},
	//监听文件
	watch: {
		scripts: {
			files: ['src/html/js/*.js','src/html/js/*.css'],
			tasks: ['jshint','cssmin','jshint'],
			options: {
			    spawn: false,
			},
		},
	},	
	//静态服务器
	connect: {
    server: {
      options: {
        port: 80
      }
    }
  },
  
  imagemin: {
        static: {
            options: {
                optimizationLevel: 3,
                svgoPlugins: [{removeViewBox: false}]
               
            }
        },
        dynamic: {
            files: [{
                expand: true,
                cwd: 'build/page/images',
                src: ['**/*.{png,jpg,gif}'],
                dest: 'build/page/images'
            }]
        }
    },
    // 字蛛插件：压缩与转码静态页面中的 WebFont
		'font-spider': {
			options: {
				ignore: [], //忽略加载的文件规则（支持正则） - 与 `resourceIgnore` 参数互斥
				map: [], //映射的文件规则（支持正则） - 与 `resourceMap` 参数互斥 - 可以将远程字体文件映射到本地来
				backup: false, //是否支持备份原字体
				unique: true, //是否对查询到的文本进行去重处理
				sort: true, //是否排序查找到的文本
				loadCssFile: true, //是否支持加载外部 CSS 文件
			},
			main: {
				src: 'build/page/*.html'
			}
		}
  
	
  });

  // 加载包含 "uglify" 任务的插件。
  grunt.loadNpmTasks('grunt-contrib-csslint');
  grunt.loadNpmTasks('grunt-contrib-jshint');
  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-cssmin');
  
  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.loadNpmTasks('grunt-contrib-connect');
  grunt.loadNpmTasks('grunt-contrib-clean');
  grunt.loadNpmTasks('grunt-contrib-copy');
  grunt.loadNpmTasks('grunt-contrib-imagemin');
  grunt.loadNpmTasks('grunt-font-spider');

  // 默认被执行的任务列表。
  grunt.registerTask('default', ['clean','copy','imagemin','cssmin','font-spider']);//'clean','copy','jshint','uglify','cssmin','connect','watch',imagemin,'font-spider'

};

在你的项目根根目录下运行Grunt命令