gulp-前端任务管理工具

最新推荐文章于 2024-08-08 16:10:15 发布

weixin_34221773

最新推荐文章于 2024-08-08 16:10:15 发布

阅读量68

点赞数

文章标签：前端 python javascript ViewUI

原文链接：https://my.oschina.net/sevenhdu/blog/310743

版权

2019独角兽企业重金招聘Python工程师标准>>>

What

gulp是一个任务自动运行工具，它快速、高效、简单，基于流以及代码优于配置的方式。它基于node.js的环境，通过编写javascript来定义任务。如果你是一个前端开发者，一定会觉得非常赞。

Installing

首先全局安装gulp。

npm install -g gulp

然后在你的项目里还要再安装一次。

npm install gulp --save-dev

这样，你就可以开心的使用gulp来玩耍了。

Using

首页需要在项目中创建一个文件gulpfile.js。跟Grunt中的文件Gruntfile.js类似，gulp的任务需要在gulpfile.js中定义，然后用gulp taskName 的命令去运行。

举个栗子吧。在gulpfile.js中可以会这样写

var gulp = require("gulp"),
    uglify = require("gulp-uglify");
    
gulp.task("jsminify",function(){
    gulp.src('js/app.js')
      .pipe(uglify())
      .pipe(gulp.dest('build'));
});

要成功运行上面的任务，需要先用下面的命令安装gulp-uglify插件。

npm install gulp-uglify --save-dev

然后输入下面的命令。

gulp jsminify

这样，js目录下的app.js文件经过压缩，在build目录下生成了同名的压缩文件。

Streams

gulp是基于流的。流能通过一系列的functions来传递数据，然后修改数据，并将修改后的数据传递给下一个function。

通过用下面的图，你可能会更好地理解上面的例子。

上面的图结合上面的例子，你可能会觉得也没什么。那么看看下面的栗子。

gulp.task('js', function () {
   return gulp.src('js/*.js')
      .pipe(jshint())
      .pipe(jshint.reporter('default'))
      .pipe(uglify())
      .pipe(concat('app.js'))
      .pipe(gulp.dest('build'));
});

同样的配上下面的图。