Gulp折腾记 - （1）简易入门篇

介绍

Gulp是什么！

• 自动化构建系统
• 基于nodejs
• 管道操作
• 本身功能不多，但是有丰富的插件可以使用！！社区很活跃

和Grunt相比，Gulp是相当的灵活简洁，高效~~
因为Grunt IO频繁，而这货基于管道所以快很多（什么是管道，可以引擎下，学过linux的小伙伴都应该知道）

官方网站 ： Gulp
插件查询： Gulp Plugin

---

简易教程

安装

1. 全局安装 ：npm install gulp -g
2. 项目安装 ：
   
   • npm install gulp --save
   • npm install gulp --save-dev

模块的安装 （在项目下）：

• npm install gulp-minify-css --save-dev

两者区别，可以看npm手册，也可以看下我的上篇博客npm install

使用

---

配置

在项目根目录下创建一个名为 gulpfile.js 的文件：

//加载核心模块【gulp】 ，还有第三方模块【gulp-minify-css】var gulp = require('gulp'),    cssminfy = require('gulp-minify-css');//压缩CSS任务gulp.task('cssminify', function () {    gulp.src('src/css/*.css')        .pipe(cssmin())        .pipe(gulp.dest('public/css'));});//监听文件变化的任务gulp.watch('src/css/*.css', ['cssminify']);//默认任务gulp.task('default',['cssminify'])

---

执行

• 只要配置了default方法，默认在终端执行gulp或者gulp default就会调用该方法；default有点类似入口。。可以把多个执行方法放在里面，，达到一次性执行所有任务

分析

• 加载模块的就不用说了
• gulp.task是定位一个任务，arg1是任务名可以自定义，后者是执行函数
  
  • gulp.src 这个是源文件地址
  • gulp.dest 这个是输出文件所在路径
• gulp.watch是一个监听。可以监听你配置路径的文件变化，然后执行相对应的任务；【非常实用】
• 默认任务我的理解是类似main。。也就是核心入口

Tips:

监听方法的使用很简单，打开终端（terminal）.在当前项目下输入 gulp watch ；当你操作监听目录下的文件时候，就会自动执行该任务；
比如我例子那个，你动了src/css/*.css下的任何一个css文件的代码。都会自动执行压缩CSS的任务；
这里当然只是一个简单的例子，实际项目中，我们的监听不仅仅这么一小撮。。需要加执行函数来实现更复杂的监听；从而监听整个开发环境需要改动的

---

总结

Gulp 入门挺简单的。有兴趣的可以学学；至于更加深入的【用于项目中的】，以后会慢慢道来；
后面的Gulp资料相当不错，可以看看；

Gulp资料

• 前端构建工具gulp入门教程

  很不错的入门篇，比我的详细多了。。。可以阅读

• Gulp安装及配合组件构建前端开发一体化
  这个是一个综合运用的案例，可以参考参考

• Gulp 中文API