打包压缩js,css,支持sass编译成css,图片压缩,图片组建成精灵图,静态文件拷贝,实时监听变化自动刷新浏览器 //引入相关插件 var gulp = require('gulp'); var rename = require('gulp-rename'); //文件重命名 var uglify = require('gulp-uglify'); //JS代码压缩 var minCSS = require('gulp-clean-css'); //CSS代码压缩 var autoprefixer = require('gulp-autoprefixer'); //添加浏览器前缀 var clean = require('gulp-clean'); //清空文件 var cleanDest = require('gulp-clean-dest'); //清空dist目录指定文件 var changed = require('gulp-changed'); //仅仅传递更改过的文件 var imagemin = require('gulp-imagemin'); //图片压缩 var spritesmith = require('gulp.spritesmith'); //PNG图片合并成精灵图 const filter = require('gulp-filter'); //js压缩过滤器,排除已压缩过的 var sass = require('gulp-sass'); //处理sass文件 var browserSync = require('browser-sync'); //拥有实时重载服务器 var reload = browserSync.reload; //编译后重新刷新浏览器 var buffer = require('vinyl-buffer'); var merge = require('merge-stream'); var pageSrc = 'src/pages/**/*.html'; var pageDist = 'dist/pages/'; var jsSrc = 'src/js/**/*.js'; var jsDist = 'dist/js/'; var cssSrc = 'src/css/**/*.css'; var cssDist = 'dist/css/'; var sassSrc = 'src/sass/**/*.scss'; var sassDist = 'src/css/'; var imgSrc = 'src/images/*'; var imgDist = 'dist/images/'; var iconfontSrc = 'src/iconfont/*'; var iconfontDist = 'dist/iconfont/'; var staticSrc = 'src/static/*'; var staticDist = 'dist/static/'; var spriteSrc = 'src/images/*.png'; var spriteDist = 'src/images/sprite'; gulp.task('html', function() { //拷贝html return gulp.src(pageSrc) .pipe(changed(pageDist)) .pipe(cleanDest(pageDist))//先清空后生成 .pipe(gulp.dest(pageDist)) .pipe(reload({ stream:true })); }); //对已经压缩过的文件进行过滤,不再压缩 var jsFilter = filter([jsSrc, '!src/js/**/*.min.js'], {restore: true}); gulp.task('js', function() { //拷贝压缩js return gulp.src(jsSrc) .pipe(changed(jsDist)) .pipe(cleanDest(jsDist))//先清空后生成 .pipe(jsFilter) // 这会输出一个未压缩过的版本 .pipe(gulp.dest(jsDist)) // 这会输出一个压缩过的并且重命名未 foo.min.js 的文件 .pipe(uglify()) .pipe(rename({ extname: '.min.js' })) .pipe(jsFilter.restore) .pipe(gulp.dest(jsDist)) .pipe(reload({ stream:true })); }); gulp.task('css', function() { //拷贝压缩css return gulp.src(cssSrc) .pipe(changed(cssDist)) .pipe(cleanDest(cssDist))//先清空后生成 .pipe(autoprefixer({ browsers: ['last 2 versions'], cascade: false })) // 这会输出一个未压缩过的版本 .pipe(gulp.dest(cssDist)) .pipe(minCSS()) .pipe(rename({ extname: '.min.css' })) .pipe(gulp.dest(cssDist)) .pipe(reload({ stream:true })); }); gulp.task('sass', function () { //将sass文件编译成css return gulp.src(sassSrc) .pipe(changed(sassSrc)) .pipe(cleanDest(sassDist))//先清空后生成 .pipe(sass()) .pipe(gulp.dest(sassDist)) .pipe(reload({ stream:true })); }); gulp.task('img', function() { //拷贝压缩图片 return gulp.src([imgSrc,'src/images/**/*']) .pipe(changed(imgSrc)) .pipe(cleanDest(imgDist))//先清空后生成 // 这会输出一个未压缩过的版本 .pipe(imagemin([ imagemin.gifsicle({interlaced: true}), imagemin.jpegtran({progressive: true}), imagemin.optipng({optimizationLevel: 5}), imagemin.svgo({ plugins: [ {removeViewBox: true}, {cleanupIDs: false} ] }) ])) .pipe(gulp.dest(imgDist)) .pipe(reload({ stream:true })); }); gulp.task('sprite', function () { //产出精灵图 /* //img,css产出的路径相同时 var spriteData = gulp.src(spriteSrc).pipe(cleanDest(spriteDist)).pipe(spritesmith({ imgName: 'sprite.png', cssName: 'sprite.css' })); return spriteData.pipe(gulp.dest(spriteDist));*/ var spriteData = gulp.src(spriteSrc) .pipe(cleanDest(spriteDist)) .pipe(spritesmith({ imgName: 'sprite.png', cssName: 'sprite.css' })); //设置打包的图片路径 var imgStream = spriteData.img .pipe(buffer()) .pipe(imagemin()) .pipe(gulp.dest(spriteDist)); //设置打包的css路径 var cssStream = spriteData.css .pipe(gulp.dest('src/css/sprite')); return merge(imgStream, cssStream); }); gulp.task('ifont', function () { //拷贝图标字体 return gulp.src(iconfontSrc) .pipe(changed(iconfontDist)) .pipe(cleanDest(iconfontDist))//先清空后生成 .pipe(gulp.dest(iconfontDist)) .pipe(reload({ stream:true })); }); gulp.task('static', function () { //拷贝静态资源,如json数据 return gulp.src(staticSrc) .pipe(changed(staticDist)) .pipe(cleanDest(staticDist))//先清空后生成 .pipe(gulp.dest(staticDist)) .pipe(reload({ stream:true })); }); //清除dist目录 gulp.task('clean', function () { return gulp.src('dist', {read: false}) .pipe(clean()); }); //初始化时,批量执行多个操作 gulp.task('build', ['html','sass', 'css','js','sprite','img','ifont','static']); //开启本地服务器监视文件改动 gulp.task('serve', function() { browserSync({ open:false, server: { baseDir: 'dist', index : "/pages/index.html" //将dist目录下的index.html作为入口页面访问 } }); }); //启动项目,命令:gulp start , // 浏览器访问地址:http://localhost:3000/pages/index.html gulp.task('start',['clean'], function() { gulp.start(['build','serve']); gulp.watch(pageSrc, ['html']); gulp.watch(sassSrc, ['sass']); gulp.watch(cssSrc, ['css']); gulp.watch(jsSrc, ['js']); gulp.watch('src/images/*.png', ['sprite']); gulp.watch(imgSrc, ['img']); gulp.watch(iconfontSrc, ['ifont']); gulp.watch(staticSrc, ['static']); }); gulp.task('tojsp', function() { //新增jsp文件 return gulp.src('dist/pages/**/*.html') .pipe(rename({ extname: '.jsp' })) .pipe(gulp.dest('dist/views/')) }); 说明:使用 BrowserSync 和 gulp,你可以轻松地创建一个开发服务器,然后同一个 WiFi 中的任何设备都可以方便地访问到。BrowserSync 同时集成了 live-reload 所以不需要另外做配置了。打开一个浏览器,访问默认的 URL (http://localhost:3000)
当前案例的目录结构为:(目录粗略图,详细图)
注:当你启动项目后直接浏览器输入http://localhost:3000时可能返回的页面信息是:Get Error,排除了项目配置错误及代码书写错误后,该错误可能是你的访问地址没有进入到指定页面,倘若你的项目目录结构比较复杂,主页面不是直接暴露在外面,此时你需要在地址后面补充访问的页面路径,例如我这边的访问时:http://localhost:3000/pages/home/home.html