标签:
‘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
标签:
原文地址:http://www.cnblogs.com/marymei0107/p/5809234.html