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

介绍

Gulp是什么！

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

与Grunt相比，Gulp是相当的灵活简洁，高效,不管是可读性和还是性能上都优于前者

官方网站 ： 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 中文API