聊聊 gulp

gulp, 一款构建工具，准确的说应该是一个构建平台，一个构建系统，有很多很多插件。。。

gulp 的作用主要是帮我们完成一些重复性的工作，比如：

gulp-autoprefixer 自动给 CSS 添加厂商前缀。

gulp-sass 把 Sass 编译成 css 。

gulp-wrap 可以把各个 html 文件中相同的 header 和 footer 部分抽离出来。

gulp + browsersync 实现多设备同步调试，页面自动加载（ live reloading ）等功能。

gulp-purifycss 去除没用的 CSS 代码。

那么gulp的自动化的脚本怎么写呢？

拿 gulp sass 举例，我们通过 gulpFile.js 来写

var gulp =require('gulp');

var sass =require('gulp-sass');

gulp.task('sass',function(){  

      gulp.src('src/main.scss')      

      .pipe(sass())

      .pipe(gulp.dest('dist/'));

});

这样每次运行gulp sass就可以把 main.scss 文件，编译输出为 main.css 了。

我的项目中用到的gulp插件有：

gulp-autoprefixer

gulp-minifycss

gulp-imagemin  (注：这个要安装两个包 cnpmi -D  gulp-imagemin imagemin-pngquant）

---

有的时候当我们使用 gulp－watch 后，修改文件造成语法错误时，gulp－watch 就会自动退出，然而我们并没察觉。。，所以解决办法：

这样，当我们出错后，就会直接看到报错信息。

---