第一步：安装node和npm
不用说，要用gulp，得先安装node和npm（安装完node后，自带有npm）
第二步：安装gulp
首先 全局安装gulp
cnpm install gulp --save-dev -g
其次 本地安装gulp依赖
cnpm install gulp --save-dev
第三步：安装需要的插件
（有得不是必须的，看需求）
npm init //- 会生成一个package.json文件
npm install gulp --save-dev //- gulp插件的核心
npm install gulp-minify-css --save-dev //- 压缩CSS文件
npm install gulp-rev-collector --save-dev //- 路径替换
npm install gulp-clean --save-dev //- 用于删除文件
npm install gulp-uglify --save-dev //- 压缩js代码
npm install gulp-imagemin --save-dev //- 压缩图片
npm install gulp-base64 --save-dev //- 把小图片转成base64字符串
安装完毕之后，会在项目中生成一个node_moudles目录，所有的插件全部在该目录下。
第四步
本地创建gulpfile.js文件并配置gulpfile.js
基本使用：
/*压缩css*/
var gulp=require('gulp'),
cssmin=require('gulp-minify-css');//引入css压缩模块
gulp.task('testCssmin',function(){
gulp.src('src/css/*.css')//要压缩的文件路径
.pipe(cssmin())//执行压缩
.pipe(gulp.dest('dist/css'));//将压缩好的文件输出到"dist/css"文件夹内
});
部分功能配置（不需要的可以自行删除）
var gulp = require('gulp');
var concat = require('gulp-concat'); //- 多个文件合并为一个；
varuglify = require('gulp-uglify'); //- 压缩js代码
varimagemin = require('gulp-imagemin'); //- 压缩图片
varbase64 = require('gulp-base64'); //- 把小图片转成base64字符串
var clean = require('gulp-clean'); //- 用于删除文件
/*清理文件*/
gulp.task('clean',function () { //删除dist目录下的所有文件,谨慎使用
gulp.src('dist/*',{read:false})
.pipe(clean());
});
/*压缩并复制图片*/
gulp.task('compress-img',function () {
gulp.src('webContent/images/**/*.*') //原图片的位置
.pipe(imagemin()) //执行图片压缩
.pipe(gulp.dest('dist/images')); //压缩后的图片输出的位置
});
/////////////////另外一种无损压缩
首先安装
cnpm install gulp-smushit;
var gulp = require('gulp');
var smushit = require('gulp-smushit');
gulp.task('smushit', function () {
return gulp.src('images/*')
.pipe(smushit({
verbose: true
}))
.pipe(gulp.dest('smushit-dist'));
});
第五步：运行gulp命令
gulp compress-img
执行成功之后会生成相应的文件目录存放压缩好的文件
1、对于编译sass
要注意是sass的语法，不要省略分号
（比如导入外部文件时，别忘了分号）
@import './base';
cnpm install gulp-sass --save-dev
在gulpfile.js下
var gulp = require('gulp');
var sass = require('gulp-sass');
gulp.task('sass', function () {
return gulp.src('./sass/**/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('./css'));
});
//所以我们添加以上代码，**是指所有深度的文件夹
//只针对sass监测
// gulp.task('sass:watch', function () {
// gulp.watch('./sass/**/*.scss', ['sass']);
// });
//可以添加多个监听命令
gulp.task('watch',function(){
gulp.watch('./sass/**/*.scss', ['sass']);
})
//例如
//gulp.task('watch',function(){
// gulp.watch('./stylesheets/**/*.scss',['sass']);
// gulp.watch('./index.html',['sass']);
//})
最后执行
gulp watch
2、对于编译es6
cnpm install gulp-babel --save-dev
cnpm install babel-core --save-dev
cnpm install babel-preset-es2015 --save-dev
//最后一个包一定要有，因为它是编译ES6的关键
var gulp = require('gulp'),
babel = require('gulp-babel');
gulp.task('taskES6', function(){
gulp.src('./js/*.js')
.pipe(babel({
presets: ['es2015']
}))
.pipe(gulp.dest('build/build_ES6'));
});
/*可是有一个坑。当我使用ES6语法生成器 `function *` 的时候，它的确也能转译。可是执行的时候浏览器报了一个错误：
**“Uncaught ReferenceError: regeneratorRuntime is not defined”**
鬼畜啊!!! 百度了好久有一个正确的解决方法。最后去谷歌找了找。最后的解决方案是在前端页面加载一个polyfill.js的文件。 就解决了。
[polyfill.js下载地址](http://babeljs.cn/docs/usage/polyfill/)
当你编译ES6有的语法的时候可能会报这个错误有的不会报错。如果报这个错误解决方案如上~
这也算一个坑了吧。 好啦。 就结束到这里。有什么问题大家给我说。*/
3、gulp-connect实现页面实时自动刷新，解放F5
1.安装gulp,gulp-connect
cnpm install gulp --save-dev
cnpm install gulp-connect --save-dev
2.定义gulpfiles.js文件
var gulp = require('gulp');/*gulp工具*/
var stylus = require('gulp-stylus');/*css预处理器*/
var connect = require('gulp-connect');/*gulp-connect本地服务*/
//编译sass
gulp.task('css',function(){
return gulp.src("./stylus/**/pk10-kjdh.styl")
//src是监听sass文件目录，如果想监听多个文件夹可以gulp.src({"./{index.html,template/**/*.html}"})
.pipe(stylus())
.pipe(gulp.dest('./css/build'))
.pipe(connect.reload())//定义要热加载的文件
})
//定义livereload任务
gulp.task('connect', function () {
connect.server({
livereload: true
});
});
gulp.task('watch',function(){
gulp.watch("./stylus/**/pk10-kjdh.styl",['css'])
})
gulp.task('default', ['watch', 'connect']);
最后执行 gulp 一切就春暖花开了
最后上传一张实际项目中配置的gulp
gulp.png
