Skip to content

Instantly share code, notes, and snippets.

@suen427
Last active April 26, 2016 09:19
Show Gist options
  • Select an option

  • Save suen427/eef4c90a99426c584f9e1d9c9574f09f to your computer and use it in GitHub Desktop.

Select an option

Save suen427/eef4c90a99426c584f9e1d9c9574f09f to your computer and use it in GitHub Desktop.
gulp配置文件
var gulp = require('gulp'),
cleanCSS = require('gulp-clean-css'),
sourcemaps = require('gulp-sourcemaps'),
jshint = require('gulp-jshint'),
uglify = require('gulp-uglify'),
concat = require('gulp-concat'),
rename = require("gulp-rename"),
notify = require("gulp-notify"),
imagemin = require('gulp-imagemin'),
clean = require('gulp-clean'),
cache = require('gulp-cache'),
replace = require('gulp-replace'),
htmlmin = require('gulp-htmlmin');
gulp.task('html', function () {
// 将你的默认的任务代码放在这
return gulp.src('src/**/*.html')
.pipe(replace(/src=("[.|/]\S+).js/g, 'src=$1.min.js'))
.pipe(htmlmin({
collapseWhitespace: true,
minifyCSS: true,
minifyJS: true,
removeComments: true
}))
.pipe(gulp.dest('dist'))
.pipe(notify({message: "html"}));
});
gulp.task('styles', function() {
// 将你的默认的任务代码放在这
return gulp.src('src/**/*.css')
.pipe(sourcemaps.init())
.pipe(gulp.dest('dist'))
.pipe(cleanCSS())
.pipe(rename({suffix: '.min'}))
.pipe(gulp.dest('dist'))
.pipe(sourcemaps.write(''))
.pipe(gulp.dest('dist'))
.pipe(notify({ message: 'Styles task complete' }));
});
gulp.task('scripts', function() {
// 将你的默认的任务代码放在这
return gulp.src('src/**/*.js')
.pipe(sourcemaps.init())
.pipe(gulp.dest('dist'))
.pipe(rename({suffix: '.min'}))
.pipe(uglify())
.pipe(gulp.dest('dist'))
.pipe(sourcemaps.write(""))
.pipe(gulp.dest('dist'))
.pipe(notify({ message: 'Scripts task complete' }));
});
gulp.task('images', function() {
return gulp.src(['src/**/*.jpg', 'src/**/*.png', 'src/**/*.jpeg', 'src/**/*.gif'])
.pipe(cache(imagemin({
optimizationLevel: 3,
progressive: false,
interlaced: true,
svgoPlugins: [{removeViewBox: false}]
})))
.pipe(gulp.dest('dist'))
.pipe(notify({ message: 'Images task complete' }));
});
gulp.task('clean', function() {
return gulp.src(['dist/styles', 'dist/js', 'dist/img'], {read: false})
.pipe(clean())
.pipe(notify({message:'dist have been cleared'}));
});
gulp.task('watch', function() {
// 看守所有.html
gulp.watch('src/**/*.html', ['html']);
// 看守所有.css
gulp.watch('src/**/*.css', ['styles']);
// 看守所有.js档
gulp.watch('src/**/*.js', ['scripts']);
// 看守所有图片档
gulp.watch(['src/**/*.jpg', 'src/**/*.png', 'src/**/*.jpeg', 'src/**/*.gif'], ['images']);
});
gulp.task('default', ['clean'], function() {
gulp.start('html', 'styles', 'scripts', 'images', 'watch','lr');
});
/* copy form http://rhumaric.com/2014/01/livereload-magic-gulp-style/
* 自动载入 chrome需要安装插件livereload https://chrome.google.com/webstore/detail/livereload/jnihajbhpnppcggbcgedagnkighmdlei
* */
var EXPRESS_PORT = 4000;
var EXPRESS_ROOT = "dist";
var LIVERELOAD_PORT = 35729;
// Let's make things more readable by
// encapsulating each part's setup
// in its own method
function startExpress() {
var express = require('express');
var app = express();
app.use(require('connect-livereload')());
app.use(express.static(EXPRESS_ROOT));
app.listen(EXPRESS_PORT);
}
// We'll need a reference to the tinylr
// object to send notifications of file changes
// further down
var lr;
function startLivereload() {
lr = require('tiny-lr')();
lr.listen(LIVERELOAD_PORT);
}
// Notifies livereload of changes detected
// by `gulp.watch()`
function notifyLivereload(event) {
// `gulp.watch()` events provide an absolute path
// so we need to make it relative to the server root
var fileName = require('path').relative(EXPRESS_ROOT, event.path);
lr.changed({
body: {
files: [fileName]
}
});
}
// Default task that will be run
// when no parameter is provided
// to gulp
gulp.task('lr', function () {
startExpress();
startLivereload();
gulp.watch(['dist/**/*.html','dist/**/*.js','dist/js/**/*.js','dist/styl/**/*.js'], notifyLivereload);
});
{
"name": "gulp-dependenc-packages",
"version": "0.0.1",
"dependencies": {
"gulp": "^3.8.11",
"gulp-clean-css": "^2.0.0",
"gulp-sourcemaps": "^2.0.0-alpha",
"gulp-jshint": "^2.0.0",
"gulp-uglify": "^1.5.3",
"gulp-concat": "^2.6.0",
"gulp-rename": "^1.0.0",
"gulp-notify": "^2.0.0",
"gulp-imagemin": "^2.0.0",
"gulp-clean": "*",
"gulp-cache": "*",
"express": "*",
"connect-livereload": "*",
"tiny-lr": "*",
"gulp-replace": "*",
"gulp-htmlmin": "*"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment