关于grunt和gulp

Posted 小艾想偷懒

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了关于grunt和gulp相关的知识,希望对你有一定的参考价值。

grunt

是一套前端自动化工具,一个基于nodeJs的命令行工具,一般用于:
① 压缩文件
② 合并文件
③ 简单语法检查

自动化。对于需要反复重复的任务,例如压缩(minification)、编译、单元测试、linting等,自动化工具可以减轻你的劳动,简化你的工作。当你在 Gruntfile 文件正确配置好了任务,任务运行器就会自动帮你或你的小组完成大部分无聊的工作。”

Grunt 基于 Node.js ,用 JS 开发,这样就可以借助 Node.js 实现跨系统跨平台的桌面端的操作,例如文件操作等等。此外,Grunt 以及它的插件们,都作为一个 包 ,可以用 NPM 安装进行管理。所以 NPM 生成的 package.json 项目文件,里面可以记录当前项目中用到的 Grunt 插件,而 Grunt 会调用 Gruntfile.js 这个文件,解析里面的任务(task)并执行相应操作。

安装

有了nodeJs环境后(也就是得先安装nodejs),便可以开始搞grunt了,因为我们可能在任何目录下运行打包程序,所以我们需要安装CLI
官方推荐在全局安装CLI(grunt的命令行接口),在命令行输入:

npm install -g grunt-cli

这条命令将会把grunt命令植入系统路径,这样就能在任意目录运行他,原因是每次运行grunt时,它都会使用node的require查找本地是否安装grunt,如果找到CLI便加载这个本地grunt库 然后应用我们项目中的GruntFile配置,并执行任务

接下来:生成 package.json 文件

可以去网上找找(复制粘贴)这个 package.json 文件其实是 Node.js 来描述一个项目的文件,JSON 格式。生成这个文件超级简单,推荐用命令行交互式的生成一下:在项目文件下 npm init

也可以自己模仿写:

 

{   "name": "demo",  

"file": "zepto",

  "version": "0.1.0",  

"description": "demo",  

"license": "MIT",

"devDependencies": {   "grunt": "~0.4.1",   "grunt-contrib-jshint": "~0.6.3",   "grunt-contrib-concat": "~0.3.0",   "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" }, "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"   }

}

安装 Grunt 和所需要的插件

.合并文件:grunt-contrib-concat

在项目文件根目录上:

npm install grunt --save-dev
表示通过 npm 安装了 grunt 到当前项目,同时加上了 –save-dev 参数,表示会把刚安装的东西添加到 package.json 文件中。可打开 package.json 文件看下,是不是多了
"devDependencies": {
  "grunt": "^0.4.5"
}
命令行输入以下安装插件
npm install --save-dev grunt-contrib-concat grunt-contrib-jshint grunt-contrib-sass grunt-contrib-uglify grunt-contrib-watch grunt-contrib-connect

配置 Gruntfile.js 的语法

这个文件尤其关键,他一般干两件事情:

① 读取package信息

② 插件加载、注册任务,运行任务(grunt对外的接口全部写在这里面)

Gruntfile一般由四个部分组成 ① 包装函数 这个包装函数没什么东西,意思就是我们所有的代码必须放到这个函数里面

module.exports = function (grunt) {
//你的代码
}

接下来任务配置代码插件加载代码任务注册代码

这三块代码,任务配置代码就是调用插件配置一下要执行的任务和实现的功能,插件加载代码就是把需要用到的插件加载进来,任务注册代码就是注册一个 task,里面包含刚在前面编写的任务配置代码。

 

grunt.initConfig({
  pkg: grunt.file.readJSON(\'package.json\'),
  uglify: {
    options: {
      banner: \'/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\\n\'
    },
    build: {
      src: \'src/<%= pkg.name %>.js\',
      dest: \'build/<%= pkg.name %>.min.js\'
    }
  }
});

插件加载代码(还有其他插件不做介绍如watch (http://www.cnblogs.com/haogj/p/4785288.html

 grunt.loadNpmTasks(\'grunt-contrib-uglify\');(压缩)

  grunt.loadNpmTasks(\'grunt-contrib-concat\');(合并)

任务注册代码

 grunt.registerTask(\'default\', [\'uglify\',\'uglify\']);


也就是最后配置结果代码为

module.exports = function (grunt) {
  // 项目配置
  grunt.initConfig({
    pkg: grunt.file.readJSON(\'package.json\'),
    uglify: {
      options: {
        banner: \'/*! <%= pkg.file %> <%= grunt.template.today("yyyy-mm-dd") %> */\\n\'
      },
      build: {
        src: \'src/<%=pkg.file %>.js\',
        dest: \'dest/<%= pkg.file %>.min.js\'
      }
    }
  });
  // 加载提供"uglify"任务的插件
  grunt.loadNpmTasks(\'grunt-contrib-uglify\');
  // 默认任务
  grunt.registerTask(\'default\', [\'uglify\']);
}
最后命令行输入
grunt

参考:http://www.cnblogs.com/yexiaochai/p/3603389.html

http://gruntjs.com/getting-started

还是初学,等以后再深入了解grunt吧

gulp

gulp是基于Nodejs的自动任务运行器,它能自动化的完成js/coffee/less/html/image/css等文件的测试,检查,合并,压缩,格式化,浏览器自动刷新,部署文件生成,并监听文件在改动后重复指定这些步骤。在实现上,它借鉴来了Unix操作系统的管道(pipe)思想,前一级输出,直接变成后一级的输入,使得在操作上非常简单。gulp和grunt非常类似,但相比于grunt的频繁IO操作,gulo的操作就更快写了

现在开始安装:

npm install -g gulp(首先确保已经正确安装nodejs环境,然后以全局的方式安装gulp)

基于自己建的项目文件下 npm install --save-dev gulp(全局安装完后,自己要用到gulp的每一个项目都要单独安装一次,也就是所谓的局部安装)

【全局安装gulp是为了执行gulp任务,项目也安装gulp是为了调用gulp插件功能】

自动生成package.json:npm init(基于项目文件根目录)

安装依赖:npm install gulp-uglify --save-dev(即便本地系统里面没有,则命令运行后便装到了自己项目的依赖里 package.json中)其他插件类比即可

在自己的项目文件中建立gulpfile.js

var gulp=require(\'gulp\');//引入gulp

var uglify=require(\'gulp-uglify\');//

var concat=require(\'gulp-concat\');

var paths={

script:[\'js/index.js\',\'js/main/js\']//(项目文件js中的两个文件)

}

gulp.task(\'default\',function(){

gulp.src(paths)

.pipe(uglify())

.pipe(concat(\'all.min.js\'))

.pipe(gulp.dest(\'build\'));

});

最后:运行 gulp;

关于自动加载插件

npm install --save-dev gulp-load-plugins

流式开发的gulp 本人还有待学习

 

以上是关于关于grunt和gulp的主要内容,如果未能解决你的问题,请参考以下文章

为什么我放弃 Gulp 和 Grunt 而使用 npm Scripts

前端工作流程自动化——Grunt/Gulp 自动化

npm,bower,gulp,Yeoman和grunt有什么好处?

npm、bower、gulp、Yeoman 和 grunt 有啥用?

gulp和grunt的区别

Grunt、Gulp.js 和 Bower 有啥区别?为啥以及何时使用它们?