gulp构建前端工程

什么是gulp？
gulp是新一代的前端项目构建工具，你可以使用gulp及其插件对你的项目代码（less,sass）进行编译，还可以压缩你的js和css代码，甚至压缩你的图片，gulp仅有少量的API，所以非常容易学习。 gulp 使用 stream 方式处理内容。Node催生了一批自动化工具，像Bower，Yeoman，Grunt等。

gulp和grunt的异同点

易于使用：采用代码优于配置策略，Gulp让简单的事情继续简单，复杂的任务变得可管理。
高效：通过利用Node.js强大的流，不需要往磁盘写中间文件，可以更快地完成构建。
高质量：Gulp严格的插件指导方针，确保插件简单并且按你期望的方式工作。
易于学习：通过把API降到最少，你能在很短的时间内学会Gulp。构建工作就像你设想的一样：是一系列流管道。
因为gulp是用node.js写的，所以你需要在你的终端上安装好npm。npm是node.js的包管理器，所以先在你的机子上安装好node.js吧

gulp安装命令

sudo npm install -g gulp

在根目录下新建package.json文件

npm init .

安装gulp包

npm install gulp --save-dev  

安装好后再次输入gulp -v查看版本号，如下图显示则为成功：

安装插件
安装常用插件：

sass的编译                  （gulp-ruby-sass）
自动添加css前缀              （gulp-autoprefixer）
压缩css                    （gulp-minify-css）
js代码校验                  （gulp-jshint）
合并js文件                  （gulp-concat）
压缩js代码                  （gulp-uglify）
压缩图片                    （gulp-imagemin）
自动刷新页面                 （gulp-livereload）
图片缓存，只有图片替换了才压缩  （gulp-cache）
更改提醒                    （gulp-notify）
清除文件                    （del）

安装这些插件需要运行如下命令：

$ npm install gulp-ruby-sass gulp-autoprefixer gulp-minify-css gulp-jshint gulp-concat gulp-uglify gulp-imagemin gulp-notify gulp-rename gulp-livereload gulp-cache del --save-dev

-save和-save-dev可以省掉你手动修改package.json文件的步骤。

npm install module-name -save 自动把模块和版本号添加到dependencies部分

npm install module-name -save-dev 自动把模块和版本号添加到devdependencies部分

gulp命令
你仅仅需要知道的5个gulp命令

gulp.task(name[, deps], fn) 定义任务  name：任务名称 deps：