'use strict';var gulp = require('gulp'),    webserver = require('gulp-webserver'),     //gulp服务器    connect = require('gulp-connect'),         //创建本地服务器    sass = require('gulp-sass'),               //sass编译器    less = require('gulp-less'),               //less编译器    uglify = require('gulp-uglify'),           //最小化js文件    cssmin = require('gulp-minify-css'),       //最小化css文件    imagemin = require('gulp-imagemin'),       //最小化图片    browserSync = require('browser-sync').create(), //实时自动刷新,支持多种设备    livereload = require('gulp-livereload'),   //网页自动刷新,浏览器中还需安装插件,使用不便    autoprefixer = require('gulp-autoprefixer'),//自动补全浏览器兼容的css    concat = require('gulp-concat'),           //文件合并,并且带版本后缀,以清除页面缓存    clean = require('gulp-clean'),             //文件清理,将不需要的文件清除掉    zip = require('gulp-zip'),                 //自动打包并按时间重命名    sourcemaps = require('gulp-sourcemaps'),   //资源map记录    plumber = require('gulp-plumber'),         //任务错误中断自动重传var root = {    web: 'web/',}	// 启动服务器gulp.task('webserver', function() {	// 打开网站页面    gulp.src(root['web'])        .pipe(webserver({            host: '0.0.0.0',			port: 8000,            directoryListing: {                enable:true,                path: root['web']            }        })    );});// less解析gulp.task('less', function(){    //编译src目录下的所有less文件    //除了reset.less和test.less（**匹配src/less的0个或多个子文件夹）    // gulp.src(['src/less/*.less', '!src/less/**/{reset,test}.less'])     gulp.src('web/less/*.less')    // 开启sourcemap    .pipe(sourcemaps.init())    .pipe(less())    //将编译后的css压缩,    //兼容IE7及以下需设置compatibility属性 .pipe(cssmin({compatibility: 'ie7'}))    .pipe(cssmin())     // 生成写入sourcemap文件    .pipe(sourcemaps.write())    .pipe(gulp.dest('web/css'));});// 监听事件，可单独监听部分代码，也可以全部监听gulp.task('watch', function(){    // 当所有less文件发生改变时，调用less任务    // gulp.watch('web/**/*.less',['less']);    // 监听很多的文件    gulp.watch(['web/**/*.*'], ['html','less','js','jpg','png','gif']);});// gulp-connect插件：实时刷新gulp.task('connect', function(){    connect.server({        root:'web',        livereload:true         //开启实时刷新    });});gulp.task('default', ['webserver','watchLess','connect']);// gulp.task('default', function() {//     // 将需要的放到基本加载项里面//     gulp.start('webserver');//     gulp.start('watchLess');// });

 

tip:

单独执行某个gulp都是直接 gulp 启动项名称

例如监听事件，我的gulp任务名称为watchLess，所以命令为gulp watchLess

关于package.json文件里面的配置

没必要每次自己手动的添加，npm某个package的时候直接命令行，下载完毕会自动添加

比如下载gulp-less，命令：cnpm install gulp-less --save-dev

gulpfile常用的配置

gulp-webserver 服务器启动项

gulp-less less启动项

gulp-sass sass启动项，天生自带压缩特效

gulp-minify-css 将编译后的css压缩(直接在原有的less配置里面添加就好了.pipe(cssmin()))

gulp-sourcemaps 用于生成less与css编译时的引入关系，方便日后查找修改

gulp-uglify 用于压缩js

gulp-imagemin 用于压缩图片，包括jpg，png，gif