gulp的实用,gulp比较简单(对于一般需求),所以这里仅仅粘贴下代码 /** * Created by Nealyang on 16/7/29. */'use strict';var gulp =
gulp的实用,gulp比较简单(对于一般需求),所以这里仅仅粘贴下代码
/** * Created by Nealyang on 16/7/29. */'use strict';var gulp = require('gulp'), sass = require('gulp-sass'), cleanCSS = require('gulp-clean-css'), uglify = require('gulp-uglify'), rename = require('gulp-rename'), autoprefixer = require('gulp-autoprefixer'), notify = require('gulp-notify'), imageMin = require('gulp-imagemin'), del = require('del'), cache = require('gulp-cache'), pngquant = require('imagemin-pngquant'), browserSync = require('browser-sync').create();// Static servergulp.task('browserSync', function () { browserSync.init({ server: { baseDir: './' } });});gulp.task('serve', ['sass','minFile'], function () { browserSync.init({ serve: './' }); gulp.watch('./**/*.scss', ['sass']); gulp.watch("*.html").on('change', browserSync.reload); gulp.watch('./src/**/*.js',['miniFile']);});gulp.task('sass', function () { console.log(1); gulp.src('./src/sass/*.scss') .pipe(sass().on('error', sass.logError)) .pipe(autoprefixer('last 2 versions', 'ie 8', 'safari 5')) .pipe(rename({suffix: '.min'})) .pipe(cleanCSS()) .pipe(gulp.dest('dist/css')) .pipe(notify({message: 'Styles task complete'})) .pipe(browserSync.reload({stream: true}));});// 压缩JSgulp.task('minFile', function () { // js gulp.src('src/js/*.js') .pipe(uglify()) .pipe(rename({suffix: '.min'})) .pipe(gulp.dest('dist/js')) .pipe(notify({message: 'minFile task complete'})) .pipe(browserSync.reload({stream:true}));});// 压缩图片gulp.task('imageMin', function () { gulp.src('src/img/*') .pipe(cache(imageMin({ use: [pngquant()] }))) .pipe(gulp.dest('dist/img')) .pipe(notify({message: 'imageMin task complete'}));});//监听文件gulp.task('watchFile', function () { gulp.watch('./src/**/*.scss', ['sass']); gulp.watch('src/js/*.js', ['minFile']); gulp.watch('src/img/*', ['imageMin']);});gulp.task('default', ['serve', 'watchFile']);