包含常用功能的 gulpfile.js

相关包安装

建议使用cnpm

npm install --save-dev *****

其中 ***** 部分表示所需要的包模块，如 gulpfile 中的 require('gulp-useref') 需要之前进行包安装如下：

npm install --save-dev gulp-useref

源文件需要的包安装命令如下

 npm install --save-dev gulp gulp-useref gulp-notify gulp-minify-css gulp-concat gulp-css-spriter
 npm install --save-dev gulp-clean gulp-cache gulp-imagemin gulp-rename gulp-uglify browser-sync 
 npm i gulp-htmlmin --save-dev
 npm install jshint gulp-jshint --save-dev

源文件结构

下面是 gulpfile 中默认的源文件结构

—— app
  —— css	// 储存css文件
     —— **
       —— * .css
     —— * .css
  —— images	// 储存图片
    —— * .png
    —— * .jpg
    —— * .gif
 —— script	// 储存js文件
      —— **
       —— * .js
     —— * .js
 —— sprite	// 储存要合成雪碧图的文件
    —— * .png
    —— * .jpg
    —— * .gif
 —— **
   —— *.html
 —— *.html

命令行命令

gulp clean

清除dist文件夹中的内容

gulp serve

网页热加载

gulp html

更改html中的路径 并 压缩html

需要在html文件里面添加代码形式如下

<!-- build:<type>(alternate search path) <path> <parameters> -->
... HTML Markup, list of script / link tags.
<!-- endbuild -->
 
如     
<!-- build:css css/combined.css -->
<link href="css/one.css" rel="stylesheet">
<link href="css/two.css" rel="stylesheet">
 <!-- endbuild -->

gulp CSS

合并CSS文件

雪碧图合并

注意： 不需要的合并的需在css中添加注释如下

@meta {"spritesheet": {"include": false}} 

压缩CSS文件

gulp script

合并 js 文件并进行压缩

gulp imgMin

图片压缩

gulp (default)

压缩并合并源文件 并 输出到 dist 文件夹

源码

var gulp = require('gulp'),
	useref = require('gulp-useref'), // html 路径替换
	notify = require('gulp-notify'), // 提示信息
	htmlmin = require('gulp-htmlmin'),	// html 压缩
	minifyCSS = require('gulp-minify-css'), // css 压缩
	concat = require('gulp-concat'), // 文件合并
	spriter = require('gulp-css-spriter'), // 雪碧图

	clean = require('gulp-clean'),		// 清除原有文件
	cache = require('gulp-cache'),
	imagemin = require('gulp-imagemin'), // 图片压缩
	// pngcrush = require('imagemin-pngcrush'),
	rename = require('gulp-rename'), // 文件重命名
	uglify = require('gulp-uglify'), // js 压缩
	jshint = require('gulp-jshint'), // js 检测
	browserSync = require('browser-sync'),	// 浏览器刷新
	reload = browserSync.reload;


// html 相关操作
	/* 替换路径
	 *
	 *  需要在文件里面添加下面的
	 *	<!-- build:<type>(alternate search path) <path> <parameters> -->
	 *	... HTML Markup, list of script / link tags.
	 *	<!-- endbuild -->
	 *
	 *  如     
	 *  <!-- build:css css/combined.css -->
	 *  	<link href="css/one.css" rel="stylesheet">
	 *  	<link href="css/two.css" rel="stylesheet">
	 *  <!-- endbuild -->
	 *
	 */
	gulp.task('clean',function(){
		return gulp.src('./dist')
		.pipe(clean())
		.pipe(notify('清除原有文件'))
	})

	gulp.task('html',function(){
		return gulp.src('app/**/*.html')
		.pipe (useref())
		.pipe(htmlmin({collapseWhitespace: true}))
		.pipe(gulp.dest('dist/'))
	});	

// css 相关操作

	/* 	合并CSS文件
	 *
	 *  雪碧图合并
	 *		注意： 不需要的合并的需在css中添加注释如下
	 *		@meta {"spritesheet": {"include": false}} 
	 *
	 *	压缩CSS文件
	 *	
	 */
	gulp.task('CSS',function(){
		return gulp.src('./app/css/**/*.css')
		.pipe(concat('main.css'))
		.pipe(notify('css 合并完成'))
		.pipe(spriter({
			// 雪碧图的名称
			'spriteSheet' : "./dist/images/sprite_css_img.png",
			// 原图文件文件储存位置
			// 输出的雪碧图位置
			'pathToSpriteSheetFromCSS' : '../images/sprite_css_img.png'
		}))
		.pipe(notify('spriter 合并完成'))
		// 压缩
		.pipe(minifyCSS())
		// 更改css 并写入
		.pipe(gulp.dest('./dist/css'))
		.pipe(notify('css 部分完成'))
	});

// js 相关操作

	gulp.task('script',function(){
		return gulp.src('./app/script/**/*.js')
		// .pipe(jshint('.jshintrc'))
		// .pipe(jshint.reporter('default'))
		.pipe(concat('main.js'))
		.pipe(gulp.dest('./dist/script'))
		.pipe(rename({suffix: '.min'}))
		.pipe(uglify())
		.pipe(gulp.dest('./dist/script'))
		.pipe(notify('js 部分完成'))
	});

// 图片品质压缩
	gulp.task('imgMin',function(){
		return gulp.src('./app/images/**/*')	
		.pipe(cache(imagemin({ optimizationLevel: 5, progressive: true, interlaced: true })))
		.pipe(gulp.dest('./dist/images/'))
		.pipe(notify('图片压缩部分完成'))
	})

// 网页热加载
	gulp.task('serve',function(){
		browserSync({
			server : {
				baseDir : 'app'
			}
		});

		gulp.watch(['**/*.html','css/**/*.css','scripts/**/*.js'],{cwd: 'app'},reload);
	
	});



gulp.task('default',['clean'],function(){
	gulp.start('html','script','CSS','imgMin');
});