详情请参见github:
https://github.com/Sunnshino/gulpjs-plugs
1 /* 2 目录结构: 3 test(主目录) 4 src(输入路径) 5 index.html(主页面) 6 js(文件夹) 7 less(文件夹) 8 images(文件夹) 9 html(文件夹) 10 dest(输出路径) 11 js(文件夹) 12 less(文件夹) 13 img(文件夹) 14 html(文件夹) 15 16 说明: 17 paths里面有: 18 script: 19 src:来自路径 20 dest:目的路径 21 watch:监听路径 22 */ 23 let gulp = require('gulp'), 24 del = require('del'), 25 browserSync = require("browser-sync").create(); 26 let $ = require('gulp-load-plugins')(); 27 28 29 // 路径选项 30 var paths = { 31 script: { 32 src: 'src/js/*.js', 33 dest: 'dest/js/', 34 watch: 'src/js/*.js' 35 }, 36 less: { 37 src: 'src/less/*.less', 38 dest: 'dest/less/', 39 watch: 'src/less' 40 }, 41 images: { 42 src: 'src/images/*.*', 43 dest: 'dest/img/', 44 watch: 'src/images/*.*' 45 }, 46 html: { 47 src: 'src/html/*.html', 48 dest: 'dest/html', 49 watch: 'src/*.html' 50 } 51 }; 52 53 gulp.task('delete', function(cb) { 54 return del(['dest/*', '!dest/images'], cb); 55 }); 56 57 58 // 文件热更新 59 // gulp.task('reload', function() { 60 // gulp.src('/') 61 // .pipe($.connect.reload()) 62 // console.log('html change!') 63 // }); 64 65 //压缩html 66 gulp.task('html', function() { 67 var options = { 68 removeComments: true, 69 collapseWhitespace: true, 70 removeScriptTypeAttributes: true, 71 removeStyleLinkTypeAttributes: true, 72 minifyJS: true, 73 minifyCSS: true 74 }; 75 // 来自 76 gulp.src('src/index.html') 77 .pipe($.changed('dest', { hasChanged: $.changed.compareSha1Digest })) 78 .pipe($.htmlmin(options)) 79 .pipe(gulp.dest('dest')) 80 .pipe(browserSync.reload({ stream: true })); 81 }); 82 83 84 //压缩js以及重命名 85 gulp.task("script", function() { 86 // 来自路径 87 gulp.src(['src/js/jquery.js', 'src/js/index.js']) 88 .pipe($.changed(paths.script.dest, { hasChanged: $.changed.compareSha1Digest })) 89 .pipe($.jshint()) 90 .pipe($.babel()) 91 .pipe($.jshint.reporter()) 92 .pipe($.concat('index.js')) 93 .pipe($.uglify()) 94 .pipe($.rename('index.min.js')) 95 .pipe($.obfuscate()) 96 .pipe(gulp.dest(paths.script.dest)) 97 .pipe(browserSync.reload({ stream: true })); 98 }); 99 100 //实时编译less 101 gulp.task('less', function() { 102 gulp.src([paths.less.src]) 103 .pipe($.changed(paths.less.src, { hasChanged: $.changed.compareSha1Digest })) 104 .pipe($.less()) 105 .pipe($.tobase64({ 106 maxsize: 8 107 })) 108 .pipe($.concat('main.css')) 109 .pipe($.cleanCss()) 110 .pipe(gulp.dest(paths.less.dest)) 111 .pipe(browserSync.reload({ stream: true })); 112 }); 113 114 115 // 压缩图片 116 gulp.task('images', function() { 117 gulp.src(paths.images.src) 118 .pipe($.changed(paths.images.dest, { hasChanged: $.changed.compareSha1Digest })) 119 .pipe($.imagemin({ 120 progressive: true, 121 svgoPlugins: [{ removeViewBox: false }], 122 // use: [$.imageminPngquant()] 123 })) 124 .pipe(gulp.dest(paths.images.dest)) 125 .pipe(browserSync.reload({ stream: true })); 126 }); 127 128 //启动服务器热加载 129 gulp.task('server', ['delete'], function() { 130 gulp.start('html', 'less', 'script', 'images'); 131 browserSync.init({ 132 port: 8088, 133 server: { 134 baseDir: ['dest'] 135 }, 136 livereload: true 137 }); 138 139 //监控文件变化，自动更新(自添加规则) 140 gulp.watch(paths.script.watch, ['script']); 141 gulp.watch(paths.less.watch, ['less']); 142 gulp.watch(paths.html.watch, ['html']); 143 gulp.watch(paths.images.watch, ['images']); 144 }); 145 146 gulp.task('default', ['server']);