常见的gulp任务

gulpfile.js

var gulp = require('gulp'),
    sass = require('gulp-sass'),
    rename = require('gulp-rename'),
    uglify = require('gulp-uglify'),
    cssnano = require('gulp-cssnano'),
    concat = require('gulp-concat'),
    imagemin = require('gulp-imagemin'),
    autoprefixer = require('gulp-autoprefixer'),
    sprite = require('gulp.spritesmith'),
    sourcemaps = require('gulp-sourcemaps');

var browserSync = require('browser-sync');

gulp.task('browser-sync', function() {
    browserSync({
        files: "**",
        server: {
            baseDir: "./"
        }
    });
});

/*gulp.task('scss', function() {
    // 指明源文件路径、并进行文件匹配（style: 'compressed' 表示输出格式）
    return sass('src/scss/*.scss', { 
        style: 'nested',
        sourcemaps: true
        })
        .on('error', function(err) {
            console.error('Error!', err.message); // 显示错误信息
        })
        // For inline sourcemaps
        .pipe(sourcemaps.write())
        // For file sourcemaps
        .pipe(sourcemaps.write('maps', {
                includeContent: false,
                sourceRoot: 'source'
        }))
        .pipe(gulp.dest('css')); // 输出路径
});*/

// css任务
// 如果需要通过scss文件编译css，就使用这段代码
gulp.task('styles', function() {
    return gulp.src('./src/scss/*.scss')
        .pipe(sass({ style: 'expanded', }))
        .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
        .pipe(gulp.dest('./dist/css'))
        .pipe(rename({ suffix: '.min' }))
        .pipe(sourcemaps.init())
        .pipe(cssnano())
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest('./dist/css'));
    // .pipe(notify({ message: 'Styles task complete' }));
});

// js任务
gulp.task('js', function() {
    return gulp.src('./js/*.js')
        // 如果需要合并js文件则使用下面这句
        // .pipe(concat('main.js'))
        .pipe(rename({
            suffix: ".min"
        }))
        .pipe(sourcemaps.init())
        .pipe(uglify())
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest('./dist/js'));
});

// 监视任务
// 不能识别文件路径的变化
gulp.task('auto', function() {
    gulp.watch('src/scss/*.scss', ['styles']);
    gulp.watch('src/js/*.js', ['js']);
});

// 图片处理任务
gulp.task('imagemin', function() {
    return gulp.src('./src/img/*') //引入所有需处理的JS
        .pipe(imagemin({
            optimizationLevel: 3,
            progressive: true,
            interlaced: true
        }))
        // 如果想对变动过的文件进行压缩，则使用下面一句代码
        // .pipe(cache(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true }))) 
        .pipe(gulp.dest('./dist/img'));
        // .pipe(notify({ message: '图片处理完成' }));
});

// 雪碧图任务
gulp.task('sprite', function() {
    var spriteData =
        // 会返回一个对象{img: xxx, css: xxx}
        gulp.src('./src/icon/*.png') //.png图片可设置透明背景
        .pipe(spritesmith({
            imgName: 'sprite.png',
            cssName: 'sprite.css',
            algorithm: 'top-down'
        }));
    // 将雪碧图压缩后再输出
    spriteData.img.pipe(imagemin({
        optimizationLevel: 3,
        progressive: true,
        interlaced: true
    })).pipe(gulp.dest('./dist/icon')); 
    spriteData.css.pipe(gulp.dest('./dist/css')); 
});

gulp.task('default', ['js', 'styles', 'auto', 'browser-sync'],
    // 还可以传入回调
    function() {

    });