包含经常使用功能的 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');
});