grunt 压缩合并，压缩css和js

最新推荐文章于 2024-05-21 02:06:32 发布

Nomal_Life

最新推荐文章于 2024-05-21 02:06:32 发布

阅读量328

点赞数

文章标签：压缩合并 nodejs web javascript

本文链接：https://blog.csdn.net/Nomal_Life/article/details/62044437

版权

提示：本demo是在window系统环境下

1.安装grunt前先安装nodeJS nodejs官网 http://nodejs.cn/ ，下载安装即可

2.安装grunt-CLI

npm install -g grunt-cli

3.建立自己的项目

我的目录结构如下,最后俩个文件是自己建立的新的空文档，注意node_modules 是一会安装grunt依赖自动生成的，不需要自己创建

在packeage.json 文件中先写如下格式代码

{
  "name": "grunt_test",
  "version": "1.0.0",
  "devDependencies": {
    "grunt": "^1.0.1",
    "grunt-contrib-concat": "^1.0.1",
    "grunt-contrib-csslint": "^2.0.0",
    "grunt-contrib-cssmin": "^2.0.0",
    "grunt-contrib-jshint": "^1.1.0",
    "grunt-contrib-uglify": "^2.2.0",
    "grunt-contrib-watch": "^1.0.0"
  }
}

其中devDependencies的内容是以后安装的插件名称和版本信息，在使用命令安装插件后会自动生成

4. 进入到工程根目录安装grunt 作为项目的依赖

npm install grunt --save-dev

“—save-dev”的意思是，在当前目录安装grunt的同时，顺便把grunt保存为这个目录的开发依赖项

然后工程目录中会出现一个node_modules的文件夹，里面含有很多文件，但是不需要管它

5. 配置Gruntfiles.js 格式如下

module.exports = function(grunt) {
	//任务配置
	grunt.initConfig({
		//获取package.json的信息
		pkg: grunt.file.readJSON('package.json'),
			
	});
	grunt.registerTask('default', ["jshint",'csslint','concat','cssmin','uglify','watch']);

};

然后在命令行中输入 “grunt” 运行

6. 安装Grunt插件

　插件分为两类。第一类是grunt团队贡献的插件，这些插件的名字前面都带有“contrib-”前缀，而且在插件列表中有星号标注。第二类是第三方提供的插件，不带有这两个特征。

以下是非常常用的插件，几乎每个项目中都用到的这几个插件

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

7.使用插件，这里只以一个uglify（压缩js）插件为例

安装uglify插件（以后的所有插件都是以这样的命令形式安装）

npm install grunt-contrib-uglify --save-dev

下边编写一段代码测试

在 src 文件夹下新建一个test.js文件，然后写一段js代码

	function add(a, b) {
		return a + b;
	}
	function jian(a, b) {
		return a - b;
	}
	add(10,20);
	jian(30,10);

然后在Grunfiles.js文件中配置uglify插件

module.exports = function(grunt) {
	//任务配置
	grunt.initConfig({
		//获取package.json的信息
		pkg: grunt.file.readJSON('package.json'),

		
		//压缩js
		uglify: {
			options: {
				stripBanners: true,
				banner: '/*! <%= pkg.name %>-<%=pkg.version%>.js <%= grunt.template.today("yyyy-mm-dd") %> */\n'
			},
			build: {
				src: 'src/test.js',
				dest: 'build/<%=pkg.name%>-<%=pkg.version%>.min.js'
			}
		},
		
		
	
	});
	grunt.loadNpmTasks('grunt-contrib-uglify');
	
	grunt.registerTask('default', ['uglify']);

};

　上面，对uglify的配置有两项。

　　“options”中规定允许生成的压缩文件带banner，即在生成的压缩文件第一行加一句话说明。注意，其中使用到了pkg获取package.json的内容。

　　“build”中配置了源文件和目标文件。即规定了要压缩谁？压缩之后会生成谁？注意，我们这里将目标文件的文件名通过pkg的name和version来命名。

在 grunt.initConfig 方法之后，要让grunt去加载这一个插件

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

第三步:注册任务grunt.registerTask('default', ['uglify']);



在命令行输入 grunt 运行

这样在我们的工程目录中的build目录中就会出现压缩后的js文件



8. 其他的插件我就不再赘述，直接上代码
module.exports = function(grunt) {
	//任务配置
	grunt.initConfig({
		//获取package.json的信息
		pkg: grunt.file.readJSON('package.json'),
			//将多个文件合并成一个文件
			concat: {
	          options:{
	            stripBanners:true, //合并时允许输出头部信息
	            banner:'/*!<%= pkg.name %> - <%= pkg.version %>-'+'<%=grunt.template.today("yyyy-mm-dd") %> */'
	          },
	          cssConcat:{
	            src:['src/css/one.css','src/css/two.css'],
	            dest:'src/css/<%= pkg.name %> - <%= pkg.version %>.css'//dest 是目的地输出
	          },
	          jsConcat:{
	            src:'src/*.js',
	            dest:'src/<%=pkg.name %> - <%= pkg.version %>.js'
	          }
	      },
		//压缩css
		cssmin: {
			options: {
				stripBanners: true, //合并时允许输出头部信息
				banner: '/*!<%= pkg.name %> - <%= pkg.version %>-' + '<%=grunt.template.today("yyyy-mm-dd") %> */\n'
			},
			build: {
				src: 'src/css/<%=pkg.name %> - <%=pkg.version %>.css', //合并后再压缩
				dest: 'src/css/<%= pkg.name %> - <%= pkg.version %>.min.css' //dest 是目的地输出
			}
		},
		//压缩js
		uglify: {
			options: {
				stripBanners: true,
				banner: '/*! <%= pkg.name %>-<%=pkg.version%>.js <%= grunt.template.today("yyyy-mm-dd") %> */\n'
			},
			build: {
				src: 'src/<%=pkg.name %> - <%=pkg.version %>.js',
				dest: 'build/<%=pkg.name%>-<%=pkg.version%>.min.js'
			}
		},
		//jshint（js语法检测插件）插件的配置信息
		jshint: {
			build: ['Gruntfiles.js', 'src/*.js'],
			options: {
				jshintrc: '.jshintrc'
			}
		},
		//css语法检测
		csslint: {
			build: ['src/css/*.css'],
			options: {
				csslintrc: '.csslintrc'
			}
		},
		 //watch自动化
        watch:{
            build:{
                files:['src/*.js','src/css/*.css'],
                tasks:['jshint','csslint','concat','cssmin','uglify'],
                options:{spawn:false}
            }
        }
	});
	grunt.loadNpmTasks('grunt-contrib-uglify');
	grunt.loadNpmTasks('grunt-contrib-jshint');
	grunt.loadNpmTasks('grunt-contrib-concat');
	grunt.loadNpmTasks('grunt-contrib-cssmin');
	grunt.loadNpmTasks('grunt-contrib-csslint');
	grunt.loadNpmTasks('grunt-contrib-watch');
	grunt.registerTask('default', ["jshint",'csslint','concat','cssmin','uglify','watch']);

};
运行后工程的最终结果目录如下













源代码下载链接  https://github.com/fanshaolin2017/grunt_test.git