grunt压缩js和css文件(1)
来源:互联网 发布:p正装照软件 编辑:程序博客网 时间:2024/06/05 03:33
接下来是个人的理解:
压缩js
1、node安装,node会自动安装npm。
安装完之后查看版本:node -v 和 npm -v
2、新建项目后package.json 安装。
命令:npm init(直接一直回车,输入yes之后回车文件夹下就会出现package.json )注意出错:name不能包含大写字母。name: (reactJsCssPak2) reactJsCssPakSorry, name can no longer contain capital letters.
//package.json{ "name": "reactpak", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC"}
3、安装grunt命令行工具grunt-cli。
命令: npm install -g grunt-cli 安装完之后查看版本:grunt -version
4、安装grunt及其插件。
npm install grunt --save-devnpm install grunt-contrib-jshint --save-dev ( js语法检查)npm install grunt-contrib-uglify --save-dev ( 压缩,采用UglifyJS)npm install grunt-contrib-concat --save-dev ( 合并文件)或npm install grunt grunt-contrib-jshint grunt-contrib-uglify grunt-contrib-concat --save-dev
//安装的时候node_modules出现,而且也出现这四个目录,之后package.json也会显示这四个目录(那是因为在安装插件的时候加了"--save-dev")。 { "name": "reactpak", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC", "devDependencies": { "grunt": "^1.0.1", "grunt-contrib-concat": "^1.0.1", "grunt-contrib-jshint": "^1.1.0", "grunt-contrib-uglify": "^2.3.0" }}
5、新建文件Gruntfile.js
新建一个js,里面包含a.js和b.js ,再新建Gruntfile.js。目录如下:
//a.jsfunction a() { console.log("aaa")}//b.jsfunction b() { console.log("bbb")}
第一种测试:我只想压缩
//Gruntfile.jsmodule.exports = function(grunt) { // 配置 grunt.initConfig({ pkg : grunt.file.readJSON('package.json'), uglify : { options : { banner : '\n' }, build : { src : 'js/*.js', dest : 'dest/dest.min.js' } } }); // 载入uglify插件,压缩 grunt.loadNpmTasks('grunt-contrib-uglify'); // 注册任务 grunt.registerTask('default', ['uglify']);};
//dest.min.jsfunction a(){console.log("aaa")}function b(){console.log("bbb")}
总结:单个js直接压缩,多个js直接合并压缩。
第二种测试:合并与压缩
//Gruntfile.jsmodule.exports = function(grunt) { // 配置 grunt.initConfig({ pkg : grunt.file.readJSON('package.json'), concat : { domop : { src: ['js/a.js', 'js/b.js'], dest: 'desttwo/desttwo.js' } }, uglify : { options : { banner : '\n' }, build : { src : 'desttwo/desttwo.js', dest : 'desttwo/desttwo.min.js' } } }); // 载入concat和uglify插件,分别对于合并和压缩 grunt.loadNpmTasks('grunt-contrib-concat'); grunt.loadNpmTasks('grunt-contrib-uglify'); // 注册任务 grunt.registerTask('default', ['concat', 'uglify']);};
//desttwo.jsfunction a() { console.log("aaa")}function b() { console.log("bbb")}//desttwo.min.jsfunction a(){console.log("aaa")}function b(){console.log("bbb")}
总结:这个过程是先合并再压缩,出现两个js文件。
第三种测试:我想把所有的js单独压缩
//Gruntfile.jsmodule.exports = function(grunt) { // 配置 grunt.initConfig({ pkg : grunt.file.readJSON('package.json'), uglify : { options : { banner : '\n' }, my_target: { files: [ { expand: true, //相对路径 cwd: 'js/', src: '*.js', dest: 'destthree/js/', rename: function (dest, src) { var folder = src.substring(0, src.lastIndexOf('/')); var filename = src.substring(src.lastIndexOf('/'), src.length); // var filename=src; filename = filename.substring(0, filename.lastIndexOf('.')); var fileresult=dest + folder + filename + '.min.js'; grunt.log.writeln("现处理文件:"+src+" 处理后文件:"+fileresult); return fileresult; //return filename + '.min.js'; } } ] } } }); // 载入concat和uglify插件,分别对于合并和压缩 grunt.loadNpmTasks('grunt-contrib-uglify'); // 注册任务 grunt.registerTask('default', ['uglify']);};
//a.min.jsfunction a(){console.log("aaa")}//b.min.jsfunction b(){console.log("bbb")}
1 0
- grunt压缩js和css文件(1)
- grunt 压缩合并,压缩css和js
- js、css文件压缩例子-grunt
- Grunt实现css,js,images文件压缩
- Grunt 进行js,css文件合并,压缩
- grunt合并压缩js、css文件
- grunt合并压缩js,css文件
- Grunt压缩、合并js/css文件
- Grunt打包压缩JS CSS
- grunt合并压缩js,css文件(第二弹)
- grunt压缩、合并css、js文件的配置信息
- grunt基于NodeJS打包压缩JS和CSS
- 前端js和css的压缩合并之grunt
- 配置grunt进行css、js的检查、合并和压缩
- 配置grunt进行css、js的检查、合并和压缩
- 使用Grunt进行js、css压缩合并
- 使用Grunt进行js、css压缩合并
- Windows 下使用Grunt 压缩 js文件
- linux route cache相关变迁
- Android AppCompatActivity去掉标题栏,全屏
- Sqlserver命令备份恢复数据库
- 对一些 关键词、语句、函数、专业名词 等的解释和理解(一)
- SpringMVC+Html+jquery_easyui做上传文件,带进度条
- grunt压缩js和css文件(1)
- qt之图形视图框架(上)
- echarts切换tab时,第一个图表显示,第二个图表不显示的解决办法
- 【ProgrammingMicrosoftAzureServiceFabric】第三章: 有状态服务
- phpstorm webstorm
- 工作中常用的gson解析
- parameter和argument的区别
- android USB gadget框架分析
- request、response 中文乱码问题与解决方式