#Gulp使用指南
###第一步:安装Node环境 可通过NodeJS官网下载安装包, 下载完成后运行安装程序。为确保Node是否安装正确,可通过以下命令检测:
- node -v
- npm -v
###第二步:安装gulp
- 安装全局Gulp:npm install -g gulp
- 安装局部Gulp: npm install gulp --save-dev
###第三步:选择Gulp组件
#####前端项目优化需求:
- 图片压缩(jpg/png/gif) --gulp-imagemin/gulp-cache
- 样式编译合并与压缩 --gulp-sass/gulp-autoprefixer/gulp-minify-css
- JS语法检测合并与压缩 --gulp-jshint/gulp-concat/gulp-uglify
- HTML压缩 --gulp-minify-html
#####其他常用组件:
- 文件更改提醒 --gulp-notify
- 文件重命名 --gulp-rename
- 清空文件夹 --gulp-clean
#####更多组件
###第四步:项目根目录创建gulpfile.js文件 #####1、安装插件 npm install gulp-imagemin gulp-cache gulp-sass gulp-autoprefixer gulp-minify-css gulp-jshint gulp-concat gulp-uglify gulp-minify-html gulp-notify gulp-rename gulp-clean--save-dev
#####2、加载插件
// Load plugins
- sass = require('gulp-sass'),
- autoprefixer = require('gulp-autoprefixer'),
- minifycss = require('gulp-minify-css'),
- jshint = require('gulp-jshint'),
- uglify = require('gulp-uglify'),
- imagemin = require('gulp-imagemin'),
- rename = require('gulp-rename'),
- concat = require('gulp-concat'),
- notify = require('gulp-notify'),
- cache = require('gulp-cache'),
- clean = require('gulp-clean'),
- htmlmin = require('gulp-htmlmin');
#####4、建立任务
#####例:图片压缩任务 // Images gulp.task('images', function() { return gulp.src('images/*') .pipe(cache(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true }))) .pipe(gulp.dest('images')) .pipe(notify({ message: 'Images task complete' })); }); 说明:以上只做展示用,详细任务见gruntfile.js
#####5、执行任务 运行全部任务:gulp 监控任务: gulp watch
###其他 #####一、Gulp API Gulp只有四个API:task/watch/src/dest
- task: 创建任务
- watch: 监听任务
- src: 设置需要处理的文件路径
- dest: 设置生成文件的目录
#####二、项目结构 |--/dist/------------压缩后样式和脚本存放的目录 |--/images/--------图片存放目录 |--/js/--------------脚本存放目录 |--/css/------------样式存放目录 |--/music/--------音频文件 |--/video/--------视频文件 |--gulpfile.js 配置文件
#####三、参考文档
#####四、我的gulpfile.js配置文件 gulpfile.js