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