gulp 使用案例

1、gulp 配置：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175

// 引入 gulp var gulp = require('gulp');   var watch = require('gulp-watch'), //导入所有gulp需要的模块     spriter = require('gulp-css-spriter'),     spritesmith = require('gulp.spritesmith'),     imagemin = require('gulp-imagemin'),     pngquant = require("imagemin-pngquant"),     base64 = require('gulp-base64'),     autoprefixer = require('gulp-autoprefixer'),     rename = require("gulp-rename"),     cssmin = require('gulp-cssmin'),     connect = require('gulp-connect'),     concat = require('gulp-concat'),     uglify = require('gulp-uglify'),     less = require('gulp-less'),     sass = require('gulp-sass'),     uncss = require('gulp-uncss-sp'),     del = require('del'),     watchFile = (w_path, w_task) => {         var chokidar = require('chokidar');         chokidar.watch(w_path, { ignored: /[\/\\]\./ }).on('all', (event, path) => {             console.log(event, path, 'info');             if (w_task == 'scss' && event == 'unlink') {                 del(['./css/*.css'])             }             gulp.run(w_task);         });     };   gulp.task('server', function() { //创建server     connect.server({         root: './',         port: 8088,         livereload: true     }); });     // 编译Sass gulp.task('scss', function() {  //创建任务     gulp.src(['./scss/*.scss'])         .pipe(sass().on('error', sass.logError))         .pipe(autoprefixer({             browsers: ['last 6 Chrome versions', 'last 3 Safari versions', 'iOS >= 5', 'Android >= 4.0'],             cascade: true, //是否美化属性值 默认：true 像这样：             //-webkit-transform: rotate(45deg);             //        transform: rotate(45deg);             remove: true //是否去掉不必要的前缀 默认：true         }))         .pipe(cssmin())         .pipe(gulp.dest('./css'))         .pipe(connect.reload()); });   gulp.task('less', function() {     gulp.src(['./less/*.less'])         .pipe(less())         .pipe(autoprefixer({             browsers: ['last 6 Chrome versions', 'last 4 Explorer versions', 'Firefox ESR', 'last 2 Explorer versions', 'iOS >= 5', 'Android >= 4.0', '> 5%'],             cascade: true, //是否美化属性值 默认：true 像这样：             //-webkit-transform: rotate(45deg);             //        transform: rotate(45deg);             remove: true //是否去掉不必要的前缀 默认：true         }))         .pipe(cssmin())         .pipe(gulp.dest('./css'))         .pipe(connect.reload()); });   gulp.task('uncss', function() {     return gulp.src('css/*.css')         .pipe(uncss({             html: ['*.html']         }))         .pipe(gulp.dest('./css')); });   gulp.task('cssmin', function() {     gulp.src(['./css/*.css'])         .pipe(cssmin())         .pipe(gulp.dest('./css')); });     // 监听任务 gulp.task('watch', function() {     /* gulp.watch('*.html', ['html']); */ // 监听根目录下所有.html文件     gulp.watch('./scss/*.scss', ['scss']); }); gulp.task('watchIcon', function() {     watchFile('./img/icon/', 'icon2') }); gulp.task('watchScss', function() {     watchFile('./scss/', 'scss') });     // 默认任务 gulp.task('default', ['server', 'watchIcon', 'watchScss']);   gulp.task('sprite', function() {       var timestamp = +new Date();     //需要自动合并雪碧图的样式文件     return gulp.src('./scss/*.scss')         .pipe(spriter({             // 生成的spriter的位置             'spriteSheet': './img/' + timestamp + '.png',             // 生成样式文件图片引用地址的路径             // 如下将生产：backgound:url(../images/sprite20324232.png)             'pathToSpriteSheetFromCSS': '../img/' + timestamp + '.png'         }))         //产出路径         .pipe(gulp.dest('./test')); });     gulp.task('icon2', function() {     return gulp.src('./img/icon/*.png') //需要合并的图片地址         .pipe(spritesmith({             imgName: 'img/sprite.png', //保存合并后图片的地址             cssName: 'scss/comm/icon.scss', //保存合并后对于css样式的地址             padding: 20, //合并时两个图片的间距             algorithm: 'binary-tree', //注释1             cssTemplate: function(data) {                 var arr = [];                 data.sprites.forEach(function(sprite) {                     var $width = parseInt(sprite.px.width);                     var $height = parseInt(sprite.px.height);                     var $ofx = parseInt(sprite.px.offset_x);                     var $ofy = parseInt(sprite.px.offset_y);                     var $tw = sprite.total_width;                     var $th = sprite.total_height;                     arr.push(".icon-" + sprite.name +                         "{" +                         "background-image: url(" + sprite.escaped_image + ");" +                         "background-position: " + $ofx + "px " + $ofy + "px;" +                         "width:" + $width + "px;" +                         "height:" + $height + "px;" +                         "background-size:" + $tw + "px " + $th + "px;" +                         "background-repeat:" + "no-repeat;" +                         "display:" + "inline-block;" +                         "}\n");                 });                 return arr.join("");             }         }))         .pipe(gulp.dest('./')); }); gulp.task('imagemin', function() {     return gulp.src('./img/ft/*.{png,jpg,gif,ico}')         .pipe(imagemin({             optimizationLevel: 5,             progressive: true,             multipass: true,             use: [pngquant({                 quality: '50-70'             })]         }))         .pipe(gulp.dest('./img/')) });       gulp.task('base', ['sass'], function() {     return gulp.src('./scss/_reset.scss')         .pipe(base64({             baseDir: 'xgou',             extensions: ['png'],             maxImageSize: 20 * 1024,             debug: false         }))         .pipe(gulp.dest('./scss/')); });

2、package.json:

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

{   "devDependencies": {     "del": "^2.2.2",     "gulp": "^3.9.1",     "gulp-autoprefixer": "*",     "gulp-base64": "*",     "gulp-concat": "*",     "gulp-connect": "*",     "gulp-css-spriter": "*",     "gulp-cssmin": "*",     "gulp-imagemin": "*",     "gulp-less": "*",     "gulp-livereload": "*",     "gulp-rename": "*",     "gulp-sass": "*",     "gulp-uglify": "*",     "gulp-uncss-sp": "^0.0.1",     "gulp-watch": "*",     "gulp-webserver": "*",     "gulp.spritesmith": "*",     "imagemin-pngquant": "*",     "node-sass": "*",     "spritesmith": "*"   } }