gulp是基于Nodejs的自动任务运行器,它能自动化地完成 javascript/coffee/sass/less/html/image/css 等文件的的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成,并监听文件在改动后重复指定的这些步骤。
首先,使用gulp的大致步骤:
安装node --> 全局安装gulp --> 项目安装gulp以及gulp插件 --> 配置gulpfile.js --> 运行任务
1.安装nodejs和npm
2.全局安装gulp
npm install gulp -g
安装完成后,执行gulp -v,出现版本号即为正确安装。
2.新建package.json文件
注:package.json是基于nodejs项目必不可少的配置文件,它是存放在项目根目录的普通json文件;
可以手动建,也可以命令行建:
①. 手动创建:
{
"name": "test", //项目名称(必须)
"version": "1.0.0", //项目版本(必须)
"description": "This is for study gulp project !", //项目描述(必须)
"homepage": "", //项目主页
"repository": { //项目资源库
"type": "git",
"url": "https://git.oschina.net/xxxx"
},
"author": { //项目作者信息
"name": "surging",
"email": "surging2@qq.com"
},
"license": "ISC", //项目许可协议
"devDependencies": { //项目依赖的插件
"gulp": "^3.8.11",
"gulp-less": "^3.0.0"
}
}
②. 命令行建package.json(更有效)
npm init -g
这里要注意,name、version、description是必须填的,其他选填。
创建好也可以输入npm help package.json进行查看。
3. 全局安装gulp插件
npm install gulp --save-dev
这里以gulp-less(编译less文件)和gulp-imagemin(压缩图片)为例:
npm install gulp-less --save-dev
npm install gulp-imagemin --save-dev
插件将会安装在node_modules的gulp-less和gulp-imagemin目录下。
注:为了不出错,还得在项目文件下再执行npm install gulp --save-dev,
因为全局安装gulp是为了执行gulp任务,本地安装gulp则是为了调用gulp插件的功能。
4. 新建gulpfile.js文件
gulpfile.js是gulp项目的配置文件,是位于项目根目录的js文件。
//导入工具包 require('node_modules里对应模块')
var gulp = require('gulp'), //本地安装gulp所用到的地方
less = require('gulp-less'),
imagemin = require('gulp-imagemin'),
pngquant = require('imagemin-pngquant');
//定义一个testLess任务(自定义任务名称)
gulp.task('testLess', function () {
gulp.src('src/less/index.less') //该任务针对的文件
.pipe(less()) //该任务调用的模块
.pipe(gulp.dest('src/css')); //将会在src/css下生成index.css
});
//gulp.task('testImagemin', function () {
// gulp.src('src/images/*.{png,jpg,gif,ico}')
// .pipe(imagemin())
// .pipe(gulp.dest('src/img'));
//});
gulp.task('testImagemin', function () {
gulp.src('src/images/*.{png,jpg,gif,ico}')
.pipe(imagemin({
progressive: true,
svgoPlugins: [{removeViewBox: false}],//不要移除svg的viewbox属性
use: [pngquant()] //使用pngquant深度压缩png图片的imagemin插件
}))
.pipe(gulp.dest('dist/img2'));
});
gulp.task('default',['testLess','testImagemin']); //定义默认任务
//gulp.task(name[, deps], fn) 定义任务 name:任务名称 deps:依赖任务名称 fn:回调函数
//gulp.src(globs[, options]) 执行任务处理的文件 globs:处理的文件路径(字符串或者字符串数组)
//gulp.dest(path[, options]) 处理完后文件生成路径
5. 运行gulp
命令执行:gulp 任务名称
如果直接执行gulp default 或gulp ,则会调用default任务里所有的任务。
6. 使用webstorm运行gulp任务
导入项目,gulpfile.js 右键选择“Show Gulp Tasks”打开Gulp窗口,若出现”No task found”,选择右键”Reload tasks”,双击运行即可。
然后选择任务双击,
然后控制台会出现,则OK了。