运行准备： 需要node环境及git
- 全局安装gulp，命令：
npm install gulp -g
- cd到项目根目录-本地安装gulp，命令：
npm install gulp
此时目录会生成node_modules文件夹，可使用gulp -v查看是否安装成功
-
创建
packpage.json文件，命令：
npm init -y
在目录会自动生成package.json文件，如下：npm{ "name": "demo", //项目名称 "version": "1.0.0", //项目版本 "description": "", //项目描述 "main": "index.js", "dependencies": { "gulp": "^3.9.1" }, "devDependencies": {}, //项目依赖的插件 "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "", "license": "ISC" //项目许可协议 } `需要注意的是json文件内不能写注释`
- 安装所需插件
npm install --save-dev [插件名称]如：
npm install --save-dev gulp-htmlmin（压缩html插件）
--save-dev是将插件保存至package.json的devDependencies节点,不指定-dev将保存至dependencies节点
安装成功后package.json的devDependencies节点会显示插件版本号，如图：
- 配置gulp文件
在根目录手动创建普通的js后缀文件gulpfile.js，如下图：
gulp配置简易图
- 在git运行gulp，命令：
gulp html
就会将压缩好的html文件输出道设定的dist文件夹下。
多个gulp任务
gulp每种任务都要安装对应的插件，配置信息如下：
/* gulp配置文件 */
var gulp = require('gulp'); //在本地引入gulp
//引入组件
var htmlmin = require('gulp-htmlmin'); //压缩html
var minifycss = require('gulp-minify-css');//压缩css
var uglify = require('gulp-uglify'); //压缩js
var concat = require('gulp-concat'); //合并文件
var image = require('gulp-image'); //压缩图片
//执行任务
gulp.task('html',function(){
gulp.src('*.html')
.pipe(htmlmin({collapseWhitespace: true}))
.pipe(gulp.dest('dist'))
})
gulp.task('css',function(){
gulp.src('src/**/*.css') //这里是指src目录下所有的css后缀文件
.pipe(concat('all.css')) //合并文件
.pipe(minifycss()) //压缩css
.pipe(gulp.dest('dist'))
})
gulp.task('js',function(){
gulp.src('src/js/*.js')
.pipe(concat('all.js'))
.pipe(uglify())
.pipe(gulp.dest('dist'))
})
gulp.task('img',function(){
gulp.src('src/image/*') //压缩图片路径
.pipe(image()) //压缩图片
.pipe(gulp.dest('dist/image')) //压缩图片输出路径
});
gulp.task('build',['html','css','js','img']) //运行所有任务
这样配置在git输入gulp build就能自动执行所有的任务，记得执行前安装任务所需要的插件。插件用法可以在npm官网文档里找到demo
小技巧
将带有插件版本号的package.json放入根目录在git执行 npm install便可以将所需要的插件一次性下载到本地项目。
- 本博客版权归羞涩的涩和饥人谷所有，转载请注明出处
网友评论