Last active
March 2, 2016 03:10
-
-
Save black-black-cat/6fef5317fc1b7b42b410 to your computer and use it in GitHub Desktop.
常见的gulp任务
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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() { | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment