Gulp学习

gulp概念

gulp是前端开发过程优化项目的工具，不仅能对资源进行优化，而且在开发过程中能够通过配置自动完成很多重复的任务，让我们可以专注于代码，提高工作效率。
gulp可以实现以下的项目优化：

• 编译 sass
• 合并优化压缩 css
• 校验压缩 js
• 优化图片
• 添加文件指纹（md5）
• 组件化头部底部（include html）
• 实时自动刷新…
  ……
• 压缩静态资源
• 变更静态资源
• 给静态资源添加 md5
• 修改预处理样式后自动编译（SASS，Less）
• 合并雪碧图
• 自动刷新浏览器
  ……
• Sass编译
• Css Js 图片压缩
• Css Js 合并
• Css Js 内联
• Html的include功能
• Autoprefixer
• 自动刷新
• 去缓存
• Handlebars模板文件的预编译
• 雪碧图
• ESLint
• rem移动端适配方案

gulp入门

一：安装node
二：安装npm，并且学习使用npm
三：安装gulp（包括全局安装gulp，安装项目依赖的gulp）
    参考地址：https://www.gulpjs.com.cn/docs/getting-started/
四：这里实现使用gulp压缩js这一个例子作为学习参考，其余的百度一下类似。

压缩JS

在安装好全局gulp和项目依赖的gulp之后，在项目的目录下新建一个gulpfile.js。

//引入gulp
var gulp=require('gulp');
//引入组件
var uglify = require('gulp-uglify');
//压缩文件
gulp.task('script',function(){
    gulp.src('./js/*.js')
        .pipe(uglify())
        .pipe(gulp.dest('./dist'));
});

安装uglify插件：npm install --save-dev uglify gulp-uglify

在项目目录下运行gulp  gulp script
这里我们简单的将js目录下的所有的js都压缩为min.js，并且把它放在dist目录下。

参考链接：
https://segmentfault.com/a/1190000000372547
https://www.gulpjs.com.cn/docs/getting-started/