Grunt入门

网络上看了很多的Grunt教程,觉得都看得一知半解,觉得自己也有必要写一点东西,只当作是加深自己的理解。

1,全局安装Grunt

npm install -g grunt-cli //全局安装命令就不用我多说了

2,新建项目Grunt,安装项目依赖环境

npm install 这个呢,一定要在安装在项目文件夹下面如果你用的webstorm那么直接选中项目打开下面的命令行工具就可以了否则就自己cd 命令切换过去再安装吧。备注:有人说执行命令没有反应,为什么呢,因为没有package.json啊,把下面的json文件复制一份到项目里,注意名字不要修改

步子太大容易那啥,扯着蛋,我之所以觉得大部分都看得一知半解我觉得是有原因的,一瞬间接受太多的东西了,所以呢,咱们就一步一步来,先从最基本的开始。

要说最基本的就要从需求开始,现在就定一个最基本的需求,项目里面有几个js文件需要合并、压缩,现在呢,就先实现一个快捷键压缩合并js的功能吧。(谁让我是懒人呢,懒人就要用快捷键){*全自动实时压缩的人请无视我*}

3,要想压缩合并js文件,就要让项目知道你要压缩合并哪几个js文件,
并且知道压缩合并之后放在哪里

这里新建一个Gruntfile.js(注意名字,要一模一样,暂时不要考虑为什么),其它的看备注吧,简直不能更详细

module.exports = function (grunt) {//所有的代码必须放在这个里面    // 项目配置    grunt.initConfig({//初始化配置        pkg: grunt.file.readJSON('package.json'),//读取json文件配置信息        uglify: {//方法名,看最后一行代码就明白了            options: {//文件的一些描述信息,可按需配置                banner: '/*!   */\n'            },            build: {                //需要压缩合并的文件目录src,后面拼接的是上面json文件中file字段                src: 'src/.js',                //多个文件                //src: ['src/backbone.js', 'src/underscore.js'],                //也可以                //src: ['src/.js', 'src/.js'],                //压缩合并后放置的文件目录dest                dest: 'dest/.min.js'            }        }    });    // 加载提供"uglify"任务的插件 //调用压缩合并功能需要的模块    grunt.loadNpmTasks('grunt-contrib-uglify');    // 添加默认任务//默认任务是压缩合并    grunt.registerTask('default', ['uglify']);}

上面的是压缩js的,下面就放一个压缩css的例子吧,还能再学点什么

module.exports = function (grunt) {  grunt.initConfig({  concat: {//css文件合并    css: {      src: ['src/css/*.css'],//当前grunt项目中路径下的src/css目录下的所有css文件      dest: 'dist/all.css'  //生成到grunt项目路径下的dist文件夹下为all.css    }  },  cssmin: { //css文件压缩     css: {        src: 'dist/all.css',//将之前的all.css        dest: 'dist/all.min.css'  //压缩      }   }});grunt.loadNpmTasks('grunt-css');grunt.loadNpmTasks('grunt-contrib-concat');  grunt.registerTask('default', ['concat','cssmin']);}

OK, js看完了,当然里面还有很多可以了解的,这个就需要看API等等了,
然后,看看下面需要的json吧

{  "name": "demo",  "file": "lib",  "version": "0.1.0",  "description": "grunt start guide @oospace ",  "license": "MIT",  "devDependencies": {    "grunt": "~0.4.1",    "grunt-contrib-jshint": "~0.6.3",    "grunt-contrib-uglify": "~0.2.1",    "grunt-contrib-requirejs": "~0.4.1",    "grunt-contrib-copy": "~0.4.1",    "grunt-contrib-clean": "~0.5.0",    "grunt-strip": "~0.2.1"  },  "dependencies": {    "express": "3.x"  }}

这个就不加备注了,一个json文件而已,单词不认识的自己翻译一下,

注意,这里的依赖devDependencies,就是执行npm install 会自动安装的东西

4,到了这里,已经可以实现我们最初的目的了,在命令行切换到项目文件夹里

grunt //该命令会执行你定义的默认命令(上面的default)grunt  //加上你定义的命令的名字,忽略尖括号,执行对应的命令

5,至于说好的快捷键执行命令,请参考:
webstorm和node配合使用的一些小技巧之External tools

关键字:grunt

版权声明

本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符,请点击 举报 进行投诉反馈!

立即
投稿

微信公众账号

微信扫一扫加关注

返回
顶部