首先安装 Node.js
,此时已自带安装 npm 包管理器。
全局安装 gulp
执行
$ npm install gulp -g
,然后即可在命令行直接执行gulp
命令,输入gulp -v
查看安装版本。建立
package.json
文件package.json 文件储存项目的相关信息,项目根目录直接建立 package.json ,或者命令行执行
$ npm init
,填写名称、描述等信息,查看帮助:$ npm help package.json
{ "name": "project", "version": "1.0.0", "description": "Project info", "main": "gulpfile.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "repository": { "type": "", "url": "" }, "keywords": [ "" ], "author": "Kenny", "license": "ISC", "bugs": { "url": "" }, "homepage": "", "devDependencies": { "gulp": "^3.9.1" } }
本地安装 gulp
$ npm install gulp --save-dev
创建
gulpfile.js
首先写一个 Hello, world
var gulp = require('gulp'); gulp.task('SayHello',function(){ console.log('Hello, world'); })
先引用
gulp
组件,再执行一个SayHello
任务,执行命令:$ gulp SayHello
,即可打印出Hello, world
。日常使用中,一般都需要执行很多任务,不管多少任务,首先安装需要使用的组件,再引用组件,再分配任务,最后执行任务。
var gulp = require('gulp'), //Plugins模块获取 minifycss = require('gulp-minify-css'), //压缩src目录css文件 gulp.task('minify-css', function() { return gulp.src('./src/css/*.css') .pipe(minifycss()) .pipe(gulp.dest('./dist/css')); }); //监控文件变化 gulp.task('watch',function(){ gulp.watch('src/css/*.css',['minify-css']); }) // 执行 gulp 命令时执行的任务 gulp.task('default', [ 'watch','minify-css' ]);
这里调用了
gulp-minify-css
,所以首先需要安装:$ npm install gulp-minify-css --save-dev
。这里部署了两个任务,一个是压缩 CSS 文件,第二个是监控 CSS 原始文件,只要在命令行执行 gulp 命令即会执行这两个任务(已设置
default
任务名),还可以安装其它模块执行各种各样的任务,比如压缩 JS,压缩图片,压缩 HTML,文件监控,文件合并,HTML 头尾加载等等……
新模块:安装,引入,使用。
参考