grunt对js，css文件的压缩学习

首先分享几个别人的博客，很详细，能看完跟着做一遍的话基本就会了

http://yujiangshui.com/grunt-basic-tutorial/

http://developer.51cto.com/art/201506/479127.htm#topx

http://zhangzhaoaaa.iteye.com/blog/2113526

http://www.cnblogs.com/artwl/p/3449303.html

其次：

总结的步骤有点乱。

grunt的安装：
1.在安装nodejs的基础上，安装grunt-CLI，即：npm install -g grunt-cli
2.在项目文件夹例如demo2下建立两个空文档：Gruntfile.js和package.json
3.在项目文件夹路径下执行npm install grunt --save-dev
接着再执行grunt命令

4.配置Gruntfile.js文件，配置完后再运行grunt命令

5.安装需要的插件，比如压缩js代码用的uglify插件。npm install grunt-contrib-uglify --save-dev 此时package.json的devDependencies中会有改变，同时要接着配置Gruntfile.js文件，完整的如注意事项2所示

//可一次安装多个插件

6.再运行grunt。则在相应的目的文件夹下就会产生对应压缩文件

其中jshint插件是检查js语法，csslint是检查css语法错误

以上执行了多次grunt，不够自动化，因此可以使用watch插件，实现真正的自动化

注意事项：1.在package.json文件的依赖中，如果没有写，而是在安装插件的时候自动填入，
则需要--save-dev的意思就是在当前目录安装grunt的同时，顺便把grunt保存为这个目录的开发依赖项，
即package.json的devDependencies中
2.Gruntfile.js文件的具体写法如下：即：任务配置代码，插件加载代码，任务注册代码
module.exports = function (grunt) {
　　grunt.initConfig({

　　　　pkg:grunt.file.readJSON('package.json'),//将我们的配置文件读出，并且转换为json对象

　　　　cssmin: { //css文件压缩
　　　　　　css: {
　　　　　　　　src:'src/test.css', //源文件位置，
　　　　　　　　dest:'build/<%= pkg.name %>-<%=pkg.version%>.min.css' //目的文件位置及名字
　　　　　　}
　　　　}
　　});
　　grunt.loadNpmTasks('grunt-css'); //用于加载相关插件

　　grunt.registerTask('default', ['cssmin']);//注册一个自定义任务（其实也是默认任务）
}
3.

如果不混淆变量名，比如原js里面是aaaa+b，后边是压缩后是n+b。这样就改变了变量名，要想仍是aaaa，则需要在Gruntfile.js中配置

                  mangle: false, //不混淆变量名
详见第四个博客

画外音：
让 Grunt 帮忙实现下面几个功能：检查每个 JS 文件语法、合并两个 JS 文件、将合并后的 JS 文件压缩、将 SCSS 文件编译、新建一个本地服务器监听文件变动自动刷新 HTML 文件。

差不多就是这些，根据这些任务需求，需要用到：

合并文件：grunt-contrib-concat
语法检查：grunt-contrib-jshint
Scss 编译：grunt-contrib-sass
压缩文件：grunt-contrib-uglify
监听文件变动：grunt-contrib-watch
建立本地服务器：grunt-contrib-connect

grunt对js，css文件的压缩学习

相关推荐