包含常用功能的 gulpfile.js

相关包安装

建议使用cnpm

npm install --save-dev *****

其中 ***** 部分表示所需要的包模块，如 gulpfile 中的 require('gulp-useref') 需要之前进行包安装如下：

npm install --save-dev gulp-useref

源文件需要的包安装命令如下

 npm install --save-dev gulp gulp-useref gulp-notify gulp-minify-css gulp-concat gulp-css-spriter npm install --save-dev gulp-clean gulp-cache gulp-imagemin gulp-rename gulp-uglify browser-sync  npm i gulp-htmlmin --save-dev npm install jshint gulp-jshint --save-dev

源文件结构

下面是 gulpfile 中默认的源文件结构

—— app  —— css    // 储存css文件     —— **       —— * .css     —— * .css  —— images // 储存图片    —— * .png    —— * .jpg    —— * .gif —— script  // 储存js文件      —— **       —— * .js     —— * .js —— sprite  // 储存要合成雪碧图的文件    —— * .png    —— * .jpg    —— * .gif —— **   —— *.html —— *.html    

命令行命令

gulp clean

清除dist文件夹中的内容

gulp serve

网页热加载

gulp html

更改html中的路径 并 压缩html

需要在html文件里面添加代码形式如下

<!-- build:<type>(alternate search path) <path> <parameters> -->... HTML Markup, list of script / link tags.<!-- endbuild --> 如     <!-- build:css css/combined.css --><link href="css/one.css" rel="stylesheet"><link href="css/two.css" rel="stylesheet"> <!-- endbuild -->

gulp CSS

合并CSS文件

雪碧图合并

注意： 不需要的合并的需在css中添加注释如下

@meta {"spritesheet": {"include": false}} 

压缩CSS文件

gulp script

合并 js 文件并进行压缩

gulp imgMin

图片压缩

gulp (default)

压缩并合并源文件 并 输出到 dist 文件夹

源码

var gulp = require('gulp'),    useref = require('gulp-useref'), // html 路径替换    notify = require('gulp-notify'), // 提示信息    htmlmin = require('gulp-htmlmin'),  // html 压缩    minifyCSS = require('gulp-minify-css'), // css 压缩    concat = require('gulp-concat'), // 文件合并    spriter = require('gulp-css-spriter'), // 雪碧图    clean = require('gulp-clean'),      // 清除原有文件    cache = require('gulp-cache'),    imagemin = require('gulp-imagemin'), // 图片压缩    // pngcrush = require('imagemin-pngcrush'),    rename = require('gulp-rename'), // 文件重命名    uglify = require('gulp-uglify'), // js 压缩    jshint = require('gulp-jshint'), // js 检测    browserSync = require('browser-sync'),  // 浏览器刷新    reload = browserSync.reload;// html 相关操作    /* 替换路径     *     *  需要在文件里面添加下面的     *  <!-- build:<type>(alternate search path) <path> <parameters> -->     *  ... HTML Markup, list of script / link tags.     *  <!-- endbuild -->     *     *  如          *  <!-- build:css css/combined.css -->     *      <link href="css/one.css" rel="stylesheet">     *      <link href="css/two.css" rel="stylesheet">     *  <!-- endbuild -->     *     */    gulp.task('clean',function(){        return gulp.src('./dist')        .pipe(clean())        .pipe(notify('清除原有文件'))    })    gulp.task('html',function(){        return gulp.src('app/**/*.html')        .pipe (useref())        .pipe(htmlmin({collapseWhitespace: true}))        .pipe(gulp.dest('dist/'))    }); // css 相关操作    /*  合并CSS文件     *     *  雪碧图合并     *      注意： 不需要的合并的需在css中添加注释如下     *      @meta {"spritesheet": {"include": false}}      *     *  压缩CSS文件     *       */    gulp.task('CSS',function(){        return gulp.src('./app/css/**/*.css')        .pipe(concat('main.css'))        .pipe(notify('css 合并完成'))        .pipe(spriter({            // 雪碧图的名称            'spriteSheet' : "./dist/images/sprite_css_img.png",            // 原图文件文件储存位置            // 输出的雪碧图位置            'pathToSpriteSheetFromCSS' : '../images/sprite_css_img.png'        }))        .pipe(notify('spriter 合并完成'))        // 压缩        .pipe(minifyCSS())        // 更改css 并写入        .pipe(gulp.dest('./dist/css'))        .pipe(notify('css 部分完成'))    });// js 相关操作    gulp.task('script',function(){        return gulp.src('./app/script/**/*.js')        // .pipe(jshint('.jshintrc'))        // .pipe(jshint.reporter('default'))        .pipe(concat('main.js'))        .pipe(gulp.dest('./dist/script'))        .pipe(rename({suffix: '.min'}))        .pipe(uglify())        .pipe(gulp.dest('./dist/script'))        .pipe(notify('js 部分完成'))    });// 图片品质压缩    gulp.task('imgMin',function(){        return gulp.src('./app/images/**/*')            .pipe(cache(imagemin({ optimizationLevel: 5, progressive: true, interlaced: true })))        .pipe(gulp.dest('./dist/images/'))        .pipe(notify('图片压缩部分完成'))    })// 网页热加载    gulp.task('serve',function(){        browserSync({            server : {                baseDir : 'app'            }        });        gulp.watch(['**/*.html','css/**/*.css','scripts/**/*.js'],{cwd: 'app'},reload);        });gulp.task('default',['clean'],function(){    gulp.start('html','script','CSS','imgMin');});