你的位置:首页 > Java教程

[Java教程]Gulp入门指南


安装Gulp.js


Gulp是给予Node.js的,故首先安装Node.js[1],完成之后执行下面的命令安装Gulp:
 
 
npm install -g gulp//-g (global)执行全局安装gulp,这样在任何地方都可以进行 gulp 操作


安装完成之后,需要在我们的项目中使用,需要命令行切换到项目更目录(可以 右键 点击项目目录选择 在此处打开命令窗口(W))然后执行下面的命令:
    
 gulp init 
// 生成一个package.json,里面是一些常规的配置信息


如图所示,会需要设置一些name,version等属性,一般一直按回车确认即可
     
完成之后在项目更目录下多了一个package.json的文件,内容如下:

 npm install gulp --save-dev   //将gulp安装到项目目录中,bing生成依赖信息于package.js内的 devDependencies



 
安装Gulp插件
Gulp的任务都是以插件[2]的形式存在,所以在使用前,需要先安装我们用到的插件到项目目录内,插件的安装命令:
 
    
 npm install 插件名 --save-dev//多个插件可以用空格分隔 npm install gulp-util gulp-uglify gulp-concat --save-dev//安装 gulp-util gulp-uglify gulp-concat 插件//gulp-uglify:用于压缩js//gulp-concat : 用于合并文件

 




创建配置文件gulpfile.js
要使用Gulp还需要进行相关的配置,把我们的插件载入进去:
在项目的更目录内创建一个gulpfile.js文件(必须是这个文件名),
举个例子(安装一个压缩html的插件)
     
npm install gulp-htmlmin --save-dev   //安装html压缩的插件


配置内容如下:
     
var gulp = require('gulp');   var htmlmin = require('gulp-htmlmin');   //创建一个任务   gulp.task('minify',function(){     gulp.src('src/*.html')         .pipe(htmlmin({collapseWhitespace:true}))         .pipe(gulp.dest('dist'))   });

 


在该目录下的控制台中键入:
     
gulp minify  //执行压缩html的任务



查看项目中目录:


自动生成了一个dist文件夹,并且里面有一个index.html文件

 
其他插件也是同样的方式进行配置,赶紧上手去试试吧,是不是觉得 so easy呢?
 
[1]:https://nodejs.org/en/download/
[2]:https://www.npmjs.com/  里面有海量的插件库