谈谈Grunt,NPM,Gulp
来源:互联网 发布:西工大编程大作业 编辑:程序博客网 时间:2024/06/05 10:47
grunt
,npm
,gulp
,今天我来说说这三者间的区别以及他们的优缺点.相信一般前端开发者选择构建工具的时候,更多的是看个人习惯以及团队的情况.相信这三个构建工具总有一个会适合你的,我们先来看看grunt
.
Grunt
grunt
是目前社区最成熟,插件支持最多的一个构建工具,不过它的配置项之多也常常被人诟病.下面就一个简单的例子来说说它的用法.
grunt
运行之前需要全局安装命令行工具,本地安装grunt
插件
npm install -g grunt-cli
// 包装函数module.exports = function(grunt) { // 任务配置 grunt.initConfig({ concat: { foo: { files:{ 'dist/main.js': 'source/*.js' } } } }); // 加载连接文件插件 grunt.loadNpmTasks('grunt-contrib-concat'); // 测试合并任务 grunt.registerTask('concatdemo', ['concat:foo']);};
上面就是一个合并文件的例子,假如任务内的操作比较多的话,配置文件就非常多,grunt
适合对nodejs
不是非常熟悉的情况下使用,而且自定义插件也非常方便,这个可以看我之前写的文章.
grunt
在处理多个子功能的时候会频繁的调用io
来读取文件,而且不支持任务模块的重用,也就是说不能添加任务的依赖.不过入门非常容易,这些只是我自己的一些看法,也许最适合你的才是最好的,下面我们再来看看npm
.
NPM
也许有些人会说npm
不是包管理工具吗?怎么又成了构建工具了,其实它是可以当成构建工具来用的,奥秘就在package.json
文件里的scripts
属性上.这里是可以定义当前模块的一些构建功能的,比如当你开发一个有点规模的模块的时候,开发与发布引用的文件其实是不一样的,一般发布的时候都会提供压缩版或者一些测试用例,下面以一个简单的例子来说明
{ "scripts": { "test": "phantomjs test/vendor/runner.js test/index.html?noglobals=true", "build": "uglifyjs underscore.js -c \"evaluate=false\" --comments \"/ .*/\" -m --source-map underscore-min.map -o underscore-min.js", "doc": "docco underscore.js" }, "devDependencies": { "docco": "0.6.x", "phantomjs": "1.9.0-1", "uglify-js": "2.4.x" }, }
上面的这个配置片段是underscore
类库的配置,可以看出上面的构建属性有test
,build
,doc
,这三个分别代表三个任务,运行命令如下
npm run
npm run
后跟任务名就可以,任务内容支持bash
脚本,也支持npm
模块本身提供的命令行命令,像上面的uglifyjs
本身就提供有命令行压缩命令,运行npm run
命令之前要保证devDependencies
里的依赖模块已经安装到本地,没有的话可以使用npm install
命令安装.
最后要说的是,任务的内容了可以是自定义模块,比如可以像这样的
"scripts": { "demo": "./demo.js" }
demo.js
#!/usr/bin/env nodeconsole.log(__dirname);console.log(process.cwd());
注意运行命令之前需要确保系统有执行demo.js
的权限,可以使用
chmod 777 demo.js
打开访问权限,然后我们运行
npm run demo
就会看到输出当前运行根目录内容,而且这里的js
文件可以写很多自定义的东西.
最后要说明下,npm
最适用于类linux系统,因为这些系统对命令支持非常友好,windows
的话得安装模拟*inux
的命令行工具
npm
一般用在个人项目里,对于团队项目则不适用.最后说下gulp
.
Gulp
gulp
跟grunt
一样支持跨平台,不同于grunt
需要Gruntfile.js
,gulp
需要Gulpfile.js
,最核心的不同之处在于,gulp
是以流为核心的,而grunt
是以配置加上文件io
为核心的.
gulp
是流为核心然后通过管道来输入输出各个子功能的内容以方便后续操作,这样可以提高io
访问效率,自定义插件方面要比grunt
要求要高点,下面以一个简单的例子看看它的用法.
运行gulp
的系统要求
touch Gulpfile.js
npm install -g gulp
npm install gulp
var gulp = require('gulp'), uglify = require('gulp-uglify'), size = require('gulp-size');gulp.task('jsmin', function(){ return gulp .src('./app.js') .pipe(size()) .pipe(uglify()) .pipe(size()) .pipe(gulp.dest('dist/main'));});
gulp
是以src
为开始,里面传递任务需要的源文件,文件格式跟grunt
相同,后面都是以pipe
来传输前一步的输出内容,最后可以输出到一个目标文件内通过dest
方法.
gulp-size
是一个统计管道里面内容的大小的,上面是用它来显示出压缩前后的大小用来对比用的.
gulp
跟grunt
一样也支持任务里包含多个子任务,像这样的
gulp.task('build', ['jshint', 'jsmin']); // 以 gulp build 命令来运行
不过跟grunt
不一样的是,上面的多个子运任务是异步执行的,而grunt
是同步执行的.
gulp
也支持像模块里的依赖注入,而且运行自己的任务之前它会保证依赖都运行完毕,像下面这样的
gulp.task('test', ['jsmin'], function(){ return gulp .src('dist/main/*.js') .pipe(gulp.dest('build'));});
上面的代码功能是当压缩完js之后,把压缩之后的文件内容重新copy到一个新的地方.
也许gulp
唯一的缺点就是社区插件没grunt
丰富,但是随着越来越多的人进入gulp
,相信这个也不是问题.
总结
看了上面三个构建工具的分析,大家都喜欢用哪一个呢,个人推荐用gulp
,因为它代码量少而且效率比grunt
要高,不过还是那句老话,适合自己的才是最好的
.
- 谈谈Grunt,NPM,Gulp
- 前端 构建工具 Gulp和 Grunt、npm
- 前端自动化:谈谈grunt和gulp的区别
- 我为何放弃Gulp与Grunt,转投npm scripts(上)
- 我为何放弃Gulp与Grunt,转投npm scripts(中)
- 我为何放弃Gulp与Grunt,转投npm scripts(下)
- 解决"gulp" 或者 "grunt" 在npm运行时报错:“不是内部或者外部命令”
- nodeJS npm grunt grunt-cli
- gulp神器,Grunt靠边
- Gulp and Grunt
- grunt、gulp 的区别
- grunt vs gulp
- Grunt VS Gulp
- grunt vs gulp
- grunt和gulp对比
- npm安装grunt,kpm
- grunt和NPM简介
- npm,bower,gulp使用
- Grunt VS Gulp
- Sass和Compass入门
- 在实战中使用Sass和Compass
- 认识Sass和Compass
- 【译】2015: 前端工具现状
- 谈谈Grunt,NPM,Gulp
- Web前端性能优化
- 浏览器的工作原理:新式网络浏览器幕后揭秘
- CSS 选择器参考手册
- 一篇非常不错的前端面试文章
- Java学习提要——多线程命名、休眠、优先级
- CSS的box-sizing属性
- 移动前端知识总结
- Web前端,高性能优化