gulp的用法

前言

首先你必须装了nodejs

初始化npm init，然后下一步下一步

		
npm init

安装插件


npm install gulp-autoprefixer gulp-concat gulp-minify-css gulp-rev gulp-rev-collector --save-dev

gulp-autoprefixer//增加前缀, gulp-concat//合并成一个文件, gulp-minify-css//合并成一行, gulp-rev//md5加密, gulp-rev-collector

新建文件gulpfile.js


var gulp = require('gulp')
var autoprefixer = require('gulp-autoprefixer');
var concat = require('gulp-concat');
var minifyCss = require('gulp-minify-css');
var rev = require('gulp-rev');                                  //- 对文件名加MD5后缀
var revCollector = require('gulp-rev-collector');               //- 路径替换


//处理css
gulp.task('autocss',function(){
	gulp.src(['./css/ani.css','./css/style.css'])
	.pipe(concat('index.min.css'))                           //- 合并文件
	.pipe(autoprefixer())                                    //- 增加前缀
	.pipe(minifyCss())                                       //- 合并成一行
	.pipe(rev())										     //- 文件名加MD5后缀
	.pipe(gulp.dest('./dest/css/'))                          //- 转移到./dest/css目录
	.pipe(rev.manifest())                                    //- 生成一个rev-manifest.json
	.pipe(gulp.dest('./dest/css/rev'));
	console.log('css编译完成并复制到"./dest/css"目录')
})

// 替换css名
gulp.task('rev', function() {
    gulp.src(['./dest/css/rev/*.json', './html/index.html'])               //- 读取 rev-manifest.json 文件以及需要进行css名替换的文件
        .pipe(revCollector())                                              //- 执行文件内css名的替换
        .pipe(gulp.dest('./'));                                            //- 替换后的文件输出的目录
});

gulp.task('default', ['autocss', 'rev']);

雪碧图插件gulp-css-spriter

var gulp    = require('gulp');
var spriter = require('gulp-css-spriter');

gulp.task('default',function(){
	return gulp.src('./css/style.css')                               //- 获取含有雪碧图的css文件
	.pipe(spriter({
		'spriteSheet':'./dist/images/sprite.png',                    //- 合成雪碧图后存放到的路径
		'pathToSpriteSheetFromCSS':'../dist/images/sprite.png'       //- 修改css中图片的路径
	}))
	.pipe(gulp.dest('./dist/css'));                                  //- 复制css到'./dist/css'目录
})

16 Feb 2017

©  2017  DongSongShan