目錄結構

專案地址

image壓縮、精靈圖合成

var gulp = require('gulp');
var imagemin = require('gulp-imagemin');
var spritesmith = require('gulp.spritesmith');
gulp.task('img', function() {
  //壓縮圖片
  gulp.src('src/images/*.{png,jpg,gif,ico}')
    .pipe(imagemin())
    .pipe(gulp.dest('dist/images'));
  //製作雪碧圖
  gulp.src('src/images/sprite/*')
    .pipe(spritesmith({
      'imgName': 'sprite.png',
      'cssName': 'sprite.css',
      'padding': 5
    }))
    .pipe(gulp.dest('src/styles/sprite'));　　　
  gulp.src('src/styles/sprite/sprite.png')　　　　　
    .pipe(gulp.dest('dist/images'));
});
gulp.task('default', ['img']);
 

sass編譯、合併、壓縮

var gulp = require('gulp');
var concat = require('gulp-concat');
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');
var cleancss = require('gulp-clean-css');
var clean = require('gulp-clean');
var rename = require("gulp-rename");

gulp.task('sass', function() {
  return　 gulp.src('src/styles/*.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest('dist/styles/css'));
});

gulp.task('css', ['sass'], function() {
  return gulp.src('dist/styles/css/*.css')
    //合併檔案
    .pipe(concat('style.css'))
    //根據設定瀏覽器版本自動處理瀏覽器字首
    .pipe(autoprefixer({
      browsers: ['last 2 versions', 'Android >= 4.0']
    }))
    //壓縮css檔案
    .pipe(cleancss({ compatibility: 'ie9' }))
    .pipe(rename("style.min.css"))
    //輸出到目標目錄
    .pipe(gulp.dest('dist/styles'));
});

gulp.task('default', ['css']);
 

JS編譯壓縮

var gulp = require('gulp');
var babel = require('gulp-babel');
var uglify = require('gulp-uglify');
gulp.task('js', function(){
  return gulp.src('src/scripts/*.js')
    .pipe(babel({
      presets: ["babel-preset-es2015", "babel-preset-es2016", "babel-preset-es2017"].map(require.resolve)
    }))
    .pipe(uglify())
    .pipe(gulp.dest('dist/scripts'))
})

gulp.task('default', ['js']);
 

為檔案設定版本號

var gulp = require('gulp');
var rev = require('gulp-rev');
var useref = require('gulp-useref');
var revReplace = require('gulp-rev-replace');
gulp.task('file', function() {
  gulp.src('*.html')
    .pipe(useref())
    .pipe(rev())
    .pipe(revReplace())
    .pipe(gulp.dest(''));
});
gulp.task('default', ['file']);

監控變化

var gulp = require('gulp');
var gulpSequence = require('gulp-sequence');

// image
var imagemin = require('gulp-imagemin');
var spritesmith = require('gulp.spritesmith');
gulp.task('img', function() {
  //壓縮圖片
  gulp.src('src/images/*.{png,jpg,gif,ico}')
    .pipe(imagemin())
    .pipe(gulp.dest('dist/images'));
  //製作雪碧圖
  gulp.src('src/images/sprite/*')
    .pipe(spritesmith({
      'imgName': 'sprite.png',
      'cssName': 'sprite.css',
      'padding': 5
    }))
    .pipe(gulp.dest('src/styles/sprite'));　　　
  gulp.src('src/styles/sprite/sprite.png')　　　　　
    .pipe(gulp.dest('dist/images'));
});

// css
var concat = require('gulp-concat');
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');
var cleancss = require('gulp-clean-css');
var clean = require('gulp-clean');
var rename = require("gulp-rename");

gulp.task('sass', function() {
  return gulp.src('src/styles/*.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest('dist/styles/css'));
});

gulp.task('css', ['sass'], function() {
  return gulp.src('dist/styles/css/*.css')
    //合併檔案
    .pipe(concat('style.css'))
    //根據設定瀏覽器版本自動處理瀏覽器字首
    .pipe(autoprefixer({
      browsers: ['last 2 versions', 'Android >= 4.0']
    }))
    //壓縮css檔案
    .pipe(cleancss({ compatibility: 'ie9' }))
    .pipe(rename("style.min.css"))
    //輸出到目標目錄
    .pipe(gulp.dest('dist/styles'));
});


// js 
var babel = require('gulp-babel');
var uglify = require('gulp-uglify');
gulp.task('js', function(){
  return gulp.src('src/scripts/*.js')
    .pipe(babel({
      presets: ['babel-preset-es2015', 'babel-preset-es2016', 'babel-preset-es2017'].map(require.resolve)
    }))
    .pipe(uglify())
    .pipe(gulp.dest('dist/scripts'))
})

// file hash
var rev = require('gulp-rev');
var useref = require('gulp-useref');
var revReplace = require('gulp-rev-replace');
gulp.task('file', function() {
  return gulp.src('*.html')
    .pipe(useref())
    .pipe(rev())
    .pipe(revReplace())
    .pipe(gulp.dest(''));
});


// watch 
gulp.task('auto',function(){
  gulp.watch('src/images', ['img']);
  gulp.watch('src/styles/*.scss',['css']);
  gulp.watch('src/scripts/*.js',['js']);
  gulp.watch('dist/styles/style.min.css',['file']);
})


gulp.task('default',gulpSequence('img', 'css', 'js', 'file', 'auto'));

專案地址