{ "name": "my-project-name", "description":"test grunt ...", "version": "0.1.0" }2. 安装Grunt和Grunt插件(https://github.com/gruntjs)
{ "name":"test_grunt", "description":"test grunt ...", "version":"0.0.1" }第二步:安装对应插件(加上--save-dev,会在package.json中加上devDependencies依赖)
npm install grunt-contrib-clean --save-dev npm install grunt-contrib-copy --save-dev npm install grunt-contrib-concat --save-dev npm install grunt-contrib-cssmin --save-dev npm install grunt-contrib-uglify --save-dev第三步:创建Gruntfile.js,添加要使用插件配置
'use strict'; module.exports = function(grunt) { // 构建的初始化配置 grunt.initConfig({ //配置具体任务 }); // 载入要使用的插件 grunt.loadNpmTasks('grunt-contrib-clean'); // 注册刚配置好的任务 grunt.registerTask('default', ['clean']); }
{ "name": "test_grunt", "description": "test grunt ...", "version": "0.0.1", "devDependencies": { "grunt": "^0.4.5", "grunt-contrib-clean": "^0.6.0", "grunt-contrib-concat": "^0.5.1", "grunt-contrib-copy": "^0.8.0", "grunt-contrib-cssmin": "^0.12.3", "grunt-contrib-uglify": "^0.9.1" } }//Gruntfile.js
'use strict'; module.exports = function(grunt) { // 构建的初始化配置 grunt.initConfig({ /* 配置具体任务 */ pkg: grunt.file.readJSON('package.json'), dirs: { src: 'path', dest: 'dest/<%= pkg.name %>/<%= pkg.version %>', }, // clean任务(删除dest/test_grunt/0.0.1 目录下非min的文件) clean: { js: ["<%= dirs.dest %>/*.js", "!<%= dirs.dest %>/*.min.js"], css: ["<%= dirs.dest %>/*.css", "!<%= dirs.dest %>/*.min.css"] }, // copy任务(拷贝path目录下的文件到dest目录) copy: { main: { files: [ // includes files within path {expand: true, src: ['path/*'], dest: '<%= dirs.dest %>/', filter: 'isFile'}, ] } }, // concat任务(将dest目录下的a.js和b.js合并为built.js) concat: { options: { separator: '\n', }, concatCSS: { src: ['<%= dirs.dest %>/a.css', '<%= dirs.dest %>/path/b.css'], dest: '<%= dirs.dest %>/built.css', }, concatJS: { src: ['<%= dirs.dest %>/a.js', '<%= dirs.dest %>/b.js'], dest: '<%= dirs.dest %>/built.js', } }, // cssmin任务(压缩css) cssmin: { target: { files: [{ expand: true, cwd: '<%= dirs.dest %>', src: ['*.css', '!*.min.css'], dest: '<%= dirs.dest %>', ext: '.min.css' }] } }, // uglify任务(压缩js) uglify: { options: { mangle: { except: ['jQuery', 'Backbone'] } }, my_target: { files: { '<%= dirs.dest %>/bulit.min.js': ['<%= dirs.dest %>/*.js'] } } } }); // 载入要使用的插件 grunt.loadNpmTasks('grunt-contrib-clean'); grunt.loadNpmTasks('grunt-contrib-copy'); grunt.loadNpmTasks('grunt-contrib-concat'); grunt.loadNpmTasks('grunt-contrib-cssmin'); grunt.loadNpmTasks('grunt-contrib-uglify'); // 注册刚配置好的任务 grunt.registerTask('cls', ['clean']); grunt.registerTask('cpy', ['copy']); grunt.registerTask('con', ['concat']); grunt.registerTask('cmpCSS', ['cssmin']); grunt.registerTask('cmpJS', ['uglify']); grunt.registerTask('default', ['copy','concat','cssmin','uglify','clean']); }
PS:
1. 自己配置的任务名称,不能和插件名称一样,否则会造成无限循环
2. 插件名称,除最外层外,中间层名称可自定义