①确保电脑全局安装了npm
查看npm版本号：npm -v
②在项目根目录中打开cmd：创建配置文件package.json
npm init
③在项目中安装gulp
npm install gulp --save-dev
④在项目中安装gulp-sass
npm install gulp-sass --save-dev
gulp的使用：
①项目根目录创建gulpfile.js（gulp项目的配置文件）
②安装gulp-connect插件（创建服务器，监听文件变化，实现页面自动刷新）
npm install gulp-connect --save-dev
③安装压缩JS的插件gulp-uglify，pump需要附带安装
npm install gulp-uglify --save-dev
npm install pump --save-dev
④安装压缩css的插件gulp-clean-css
npm install gulp-clean-css --save-dev
⑤给css里的引用文件加版本号，可以和④结合一起用
npm install gulp-make-css-url-version
⑥压缩图片
npm install gulp-imagemin --save-dev
⑦深度压缩图片，可与⑥结合使用
npm install imagemin-pngquant --save-dev
⑧只压缩修改的图片
npm install gulp-cache --save-dev
⑨css背景图生成雪碧图
npm install gulp-css-spriter --save-dev
使用注意：要合成的图片在css中使用时不能设置background-position和background-size，合成后会自动生成雪碧图并计算好background-position的值的。
代码设置参考：http://www.cnblogs.com/xbcq/p/5277850.html
⑩根据设置浏览器版本自动处理浏览器前缀
npm install gulp-autoprefixer --save-dev
⑪使用babel编译es6语法
npm install gulp-babel babel-core babel-preset-es2015--save-dev
⑫文件引入合并
npm install gulp-file-include --save-dev
⑬压缩htmlmin
npm install gulp-htmlmin --save-dev
⑭给页面的引用添加版本号，清除页面引用缓存
npm install gulp-rev-append --save-dev
其他：
重命名：npm install gulp-rename --save-dev
过滤文件：npm install gulp-filter --save-dev
删除文件：npm install del --save-dev
合并文件：npm install gulp-concat --save-dev
package.json
{
"name": "zufang",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.26.3",
"babel-preset-es2015": "^6.24.1",
"del": "^3.0.0",
"gulp": "^3.9.1",
"gulp-autoprefixer": "^5.0.0",
"gulp-babel": "^7.0.1",
"gulp-cache": "^1.0.2",
"gulp-clean-css": "^3.9.4",
"gulp-connect": "^5.5.0",
"gulp-css-spriter": "^0.4.0",
"gulp-file-include": "^2.0.1",
"gulp-filter": "^5.1.0",
"gulp-htmlmin": "^4.0.0",
"gulp-imagemin": "^4.1.0",
"gulp-make-css-url-version": "0.0.13",
"gulp-rename": "^1.3.0",
"gulp-rev-append": "^0.1.8",
"gulp-sass": "^4.0.1",
"gulp-uglify": "^3.0.0",
"imagemin-pngquant": "^5.1.0",
"pump": "^3.0.0"
}
}
gulpfile.js
//引入插件
var gulp = require('gulp');
var sass = require('gulp-sass');
var connect = require('gulp-connect');
var uglify = require('gulp-uglify');
var pump = require('pump');
var cssmin = require('gulp-clean-css');
var cssver = require('gulp-make-css-url-version');
var imagemin = require('gulp-imagemin');
var pngquant = require('imagemin-pngquant');
var cache = require('gulp-cache');
var spriter = require('gulp-css-spriter');
var autoprefixer = require('gulp-autoprefixer');
var babel = require('gulp-babel');
var fileinclude = require('gulp-file-include');
var htmlmin = require('gulp-htmlmin');
var rev = require('gulp-rev-append');
var rename = require('gulp-rename');
var filter = require('gulp-filter');
var del = require('del');
//路径变量
var path = {
//开发环境
src: {
html: './src',
js: './src/js',
scss: './src/scss',
css: './src/css',
img: './src/img',
font:'./src/font',
includebase: './src/include' //include引用文件路径
},
//发布环境
dist: {
html: './dist',
js: './dist/js',
scss: './dist/scss',
css: './dist/css',
img: './dist/img',
font:'./dist/font',
baseroot: './dist'
}
};
//将scss文件编译成css
gulp.task('scss', function() {
return gulp.src(path.src.scss + '/*.scss', { style: 'expanded' })
.pipe(cache(sass()))
.pipe(gulp.dest(path.src.css))
.pipe(connect.reload());
});
//压缩css文件，css样式加前缀
gulp.task('css', ['scss'], function() {
var timestamp = new Date().getTime();
return gulp.src(path.src.css + '/*.css')
.pipe(autoprefixer({ //给样式增加浏览器前缀
// browsers:['last 2 versions','safari 5','ie 8', 'ie 9', 'opera 12.1','ff 15', 'ios 6','android 4'],
browsers: ['>0.1%'],
cascade: true, //是否美化属性值
remove: true //是否去掉不必要的前缀 默认true
}))
// .pipe(spriter({ //合成雪碧图
// 'spriteSheet': path.dist.img + '/sprite_' + timestamp + '.png', // 生成的spriter的位置
// // 如下将生产：backgound:url(../images/sprite20324232.png)
// 'pathToSpriteSheetFromCSS': './../img/sprite_' + timestamp + '.png', //生成的样式文件里面图片引用地址的路径
// }))
// .pipe(rename({ suffix: '.min' })) // 对管道里的文件流添加 .min 的重命名
// .pipe(cssmin({
// advanced: false, //类型：Boolean 默认：true [是否开启高级优化（合并选择器等）]
// compatibility: 'ie8', //保留ie8及以下兼容写法 类型：String 默认：''or'*' [启用兼容模式； 'ie7'：IE7兼容模式，'ie8'：IE8兼容模式，'*'：IE9+兼容模式]
// keepBreaks: true,
// keepSpecialComments: '*' //保留所有特殊前缀 当你用autoprefixer生成的浏览器前缀，如果不加这个参数，有可能将会删除你的部分前缀
// }))
.pipe(gulp.dest(path.dist.css))
.pipe(connect.reload());
});
//压缩图片
gulp.task('image', function() {
return gulp.src(path.src.img + '/**/*.{png,jpg,gif,ico}')
.pipe(cache(imagemin({
optiimizationLevel: 5, //类型：Number 默认：3 取值范围：0-7（优化等级）
progressive: true, //类型：Boolean 默认：false 无损压缩jpg图片
interlaced: true, //类型：Boolean 默认：false 隔行扫描gif进行渲染
multipass: true, //类型：Boolean 默认：false 多次优化svg直到完全优化
svgoPlugins: [{ removeViewBox: false }], //不要移除svg的viewbox属性
use: [pngquant()] //使用pngquant深度压缩png图片的imagemin插件
})))
.pipe(gulp.dest(path.dist.img))
});
/**
* 编译css及复制压缩图片及雪碧图后，再添加css引用文件的版本号
*/
// gulp.task('cssver',['css','image'], function(){
// return gulp.src(path.dist.css + '/*.css')
// .pipe(cssver())
// .pipe(gulp.dest(path.dist.css));
// });
// 压缩js文件
gulp.task('js', function(cb) {
var jsFilter = filter('**/*.min.js', { restore: true });
pump([
gulp.src(path.src.js + '/*.js'),
jsFilter,
gulp.dest(path.dist.js), //复制*.min.js文件到dist/js中
jsFilter.restore,
filter(['**/*', '!**/*.min.js']), // 筛选出管道中的非 *.min.js 文件，进行压缩编译
babel({
presets: ['es2015']
}),
// rename({ suffix: '.min' }), //重命名
uglify(),
gulp.dest(path.dist.js)
],
cb
);
});
//字体文件
// gulp.task('font',function(){
// return gulp.src(path.src.font + '/*')
// .pipe(gulp.dest(path.dist.font))
// .pipe(connect.reload());
// });
//压缩html页面，文件嵌入，页面引用文件加版本号
gulp.task('html', ['js','css','image'], function() {
var options = {
removeComments: true, //清除HTML注释
collapseWhitespace: true, //压缩HTML
collapseBooleanAttributes: true,/*省略布尔属性的值 input checked="true" ---- input */
removeEmptyAttributes: true,/*删除所有空格作属性值 input id="" ==> input*/
removeScriptTypeAttributes: true,/*删除script的type=text/javascript*/
removeStyleLinkTypeAttributes: true,/*删除style和link的type=text/css*/
minifyJS: true, //压缩页面JS
minifyCSS: true //压缩页面CSS
};
return gulp.src(path.src.html + '/**/*.html')
.pipe(fileinclude({ //文件嵌入
prefix: '@@', //变量前缀 @@include
basepath: path.src.includebase, //引用文件路径
indent: true //保留文件的缩进
}))
.pipe(rev()) //引用文件添加版本号
.pipe(htmlmin(options))
.pipe(gulp.dest(path.dist.html))
.pipe(connect.reload());
});
//clean 清空dist目录中文件
gulp.task('clean', function() {
return del(path.dist.baseroot + '/**/*');
});
// build任务，依赖清空任务
gulp.task('build', ['clean'], function() {
gulp.start('html');
});
// 服务器监听
gulp.task('server', function() {
connect.server({
root: path.dist.html,
port: 520,
livereload: true
})
// 监控文件，有变动则执行对应方法
gulp.watch(path.src.scss + '/*.scss', ['scss']);
gulp.watch(path.src.css + './*.css', ['css']);
gulp.watch(path.src.html + '/**/*.html', ['html']);
gulp.watch(path.src.img + '/**/*', ['image']);
gulp.watch(path.src.js + '/*.js', ['js']);
// gulp.watch(path.src.font + '/*', ['font']);
});
cmd输入 gulp server 开启服务器
参考资料：
https://gulpjs.com/plugins/
