nodejs之gulp自动化构建工具

淩亂°似流年 2022-08-09 15:36 248阅读 0赞

Gulp是一个构建系统，它能通过自动执行常见任务，比如编译预处理CSS，压缩JavaScript和刷新浏览器，来改进网站开发的过程。
     Gulp是基于Node.js构建的，因此Gulp源文件和你用来定义任务的Gulp文件都被写进了JavaScript（或者CoffeeScript）里。
     Gulp是一个可以在GitHub上找到的开源项目。
     Gulp本身虽然不能完成很多任务，但它有大量插件可用，开发者可以访问插件页面或者在npm搜索gulpplugin就能看到。

安装Gulp的过程十分简单。首先，需要在全局安装Gulp包：

npm install -g gulp

然后，在项目里面安装Gulp：

npm install --save-dev gulp

### 一、使用要点 ###

#### 1、Gulp是基于Node.js构建的，需要先安装好nodejs; ####

#### 2、首先创建一个名为gulpfile.js的文件，这是定义Gulp任务的地方，它可以通过gulp命令来运行 ####

### 二、常用方法 ###

#### 1、gulp.task()定义任务 ####

##### 1.1、gulp.task()函数通常会被用来定义任务。当你定义一个简单的任务时，需要传入任务名字和执行函数两个属性。 #####

gulp.task('greet', function () { 
       console.log('Hello world!');
    });

执行`gulp greet`的结果就是在控制台上打印出“Hello world”.

##### 1.2、一个任务有时也可以是一系列任务。假设要定义一个任务build来执行css、js、imgs这三个任务，我们可以通过指定一个任务数组而不是函数来完成。 #####

gulp.task('build', ['css', 'js', 'imgs']);

这些任务不是同时进行的，所以你不能认为在js任务开始的时候css任务已经结束了，也可能还没有结束。为了确保一个任务在另一个任务执行前已经结束，可以将函数和任务数组结合起来指定其依赖关系。例如，定义一个css任务，在执行前需要检查greet任务是否已经执行完毕，这样做就是可行的:

gulp.task('css', ['greet'], function () { 
       // Deal with CSS here
    });

现在，当执行css任务时，Gulp会先 执行greet任务，然后在它结束后再调用你定义的函数。

#### 2、gulp.src() ####

gulp.src()方法输入一个glob(比如匹配一个或多个文件的字符串)或者glob数组，然后返回一个可以传递给插件的数据流。

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

#### 3、引入组件 ####

Gulp上有超过600种插件供你选择，你可以在插件页面或者npm上搜索gulpplugin来浏览插件列表。以下介绍常用插件：  
3.1、引入gulp组建

var gulp = require('gulp');

3.2、gulp-uglify 文件压缩

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

3.3、gulp-less 编译less文件

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

3.4、gulp-jshint 拼接及缩小化JavaScript

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

#### 4、gulp内置任务 ####

##### 4.1、**‘default’**任务， 默认会执行的任务 #####

gulp.task('default',['css', 'imgs', 'html', 'tmod','js','font']);

##### 4.2、gulp.watch() 监听事件 #####

gulp.task('watchCss', function () { 
        gulp.watch(['./gulp_js/css/**'], ['css']); /**监听gulp_js/css/下所以有的css文件**/
    });
    gulp.task('watch',['watchCss, 'watchImgs', 'watchHtml', 'watchTmod','watchJs']); /**添加监听任务组建*/

##### 4.3、gulp.pipe(); #####

使用pipe()来串流来源档案到某个插件。

var gulp = require('gulp'),
        jshint = require('gulp-jshint'),
        uglify = require('gulp-uglify'),
        concat = require('gulp-concat');
    
    gulp.task('js', function () {
       return gulp.src('js/*.js')
          .pipe(jshint())  
          .pipe(jshint.reporter('default'))
          .pipe(uglify())     /**压缩代码**/
          .pipe(concat('app.js')) /**将所有文件合并到一个叫app.js的文件中**/
          .pipe(gulp.dest('build'));
    });

程序中JSHint插件执行了2次，这是因为第一次执行JSHint只是给文件对象附加了jshint属性，并没有输出。

##### 4.4、gulp.dest() #####

设定目的路径。一个任务可以有多个目的地。案例：如上

##### 4.5、gulp.dest() #####

设定目的路径。一个任务可以有多个目的地。案例：如上