gulp总结

入门指南 http://www.gulpjs.com.cn/docs/getting-started/
一点教程 http://www.ydcss.com/archives/424（这个比较详细，等明天试验）

2017.06.29
首先这是我的一个文件列表，我准备把最后完成的文件都放到src当中

1、第一步来编译less
首先在less文件夹下放入我们开发时候的一个less文件，要想编译less是需要先安装编译less的工具的，也就是gulp-less

npm install gulp-less –save-dev

安装好之后就可以在gulpfile中写

其中先定义less函数，task是新建任务，在这里名字为testless，要处理的文件是src里面的文件，执行的函数是less（），最后放到dest()传入的参数表示的文件夹中
gulp testless 执行之后，会发现在src中多出一个css文件里面是编译好的css文件

（1）同样可以编译多个less文件
也就是在src中传入的是数组，把需要编译的都写进去
（2）而且可以使用匹配符“!”，“”，“*”，“{}”
（3）下面是编译之后压缩css
需要的是gulp-minify-css，同样的先下载

（4）如果需要sourcemap请看教程
（5）监听编译
gulp.task(‘testWatch’, function () {
gulp.watch(‘src/*/.less’, [‘testLess’]); //当所有less文件发生改变时，调用testLess任务
});
（6）有一些异常处理，教程

2、下面是压缩js
安装gulp-uglify 原理是和less一样的
（1）指定变量名混淆

（2）其他参数

3、第三个是合并js代码，减少请求
安装gulp-concat
步骤同上，，略

4、第四个是压缩html代码
安装gulp-htmlmin

5、第五个是检测语法错误
安装gulp-jshint

6、压缩图片的
看教程，我一般在线压缩

7、好东西，自动处理低版本浏览器

gulp-autoprefixer的browsers参数详解 ：
● last 2 versions: 主流浏览器的最新两个版本
● last 1 Chrome versions: 谷歌浏览器的最新版本
● last 2 Explorer versions: IE的最新两个版本
● last 3 Safari versions: 苹果浏览器最新三个版本
● Firefox >= 20: 火狐浏览器的版本大于或等于20
● iOS 7: IOS7版本
● Firefox ESR: 最新ESR版本的火狐
● > 5%: 全球统计有超过5%的使用率
发现上面规律了吗，相信这不难看出，接下来说说各浏览器的标识：

总结就到这里，我们可以使用webpack+gulp来对我们的项目进行操作。

补充一个

转换es6语法的
gulp-babel

用法同上

还有如果想调用多个任务
可以新建默认任务
gulp.task(‘default’,[”,”,”])
执行gulp的时候会默认执行里面的所有任务