一. 安装
1. 安装nodeJS
2. npm install gulp -g(全局安装gulp)
3. 进入项目
npm init (新建package.json)
npm install --save-dev gulp (安装gulp)
npm install --save-dev gulp-less (安装gulp插件)
以下为gulp各插件名及功能:
gulp-load-plugins 加载插件
gulp-rename 重命名
gulp-uglify 压缩js
gulp-minify-css 压缩css
gulp-minify-html 压缩html
gulp-imagemin 压缩图片
gulp-jshint js代码检查
gulp-concat 文件合并
gulp-less 编译less
gulp-sass 编译sass
gulp-watch 监听文件
require-dir 管理task
4. 项目文件内新建gulp文件夹,gulpfile.js文件
gulpfile.js:
// 引入管理task的插件 var requireDir = require('require-dir'); // 任务文件夹路径 requireDir('./gulp/task', { recurse: true});
5. gulp文件夹下,新建task文件夹,config.json文件,task内包含多个任务文件
config.json:
// 源文件路径 var src = "./src"; // 生成文件路径 var dest = "./dist"; // 输出配置对象 module.exports = { less : { all : src + "/css/**/*.less", src : src + "/css/*.less", dest : dest + "/css", settings : { } } }
default任务:
var gulp = require("gulp"); gulp.task('default',['less']);
less任务:
var gulp = require('gulp'); var less = require('gulp-less'); var config = require('../config').less; gulp.task('less', function(){ return gulp.src(config.src) //less源文件 .pipe(less(config.settings)) //执行编译 .pipe(gulp.dest(config.dest)) //输出目录 });
watch任务:
var gulp = require('gulp'); var watch = require('gulp-watch'); var config = require('../config'); gulp.task('watch', function(){ watch(config.less.all, function(){ //监听所有less gulp.start('less'); //出现修改、立马执行less任务 }) })
目录结构: