安装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/ 里面有海量的插件库
原标题:Gulp入门指南
关键词: