gulp的介绍及使用

发表于 | 分类于

gulp的基本介绍

-> gulp 是一个项目构建工具,其核心内容是提供一个处理项目文件与机构的平台. 相当于一个 处理容器, 处理管道。

gulp具体的作用

  1. 代码的压缩
  2. 代码的合并
  3. less 转 css
  4. 代码的混淆
  5. 引用的替换

    gulp常见的第三方库

    -> gulp-concat 用于合并代码
    -> gulp-htmlmin 用于压缩 html 文件
    -> gulp-uglify 用于压缩 js 文件
    -> gulp-cssmin 用于压缩 css 文件
    -> gulp-rename, gulp-html-replace
    注意：可以在www.npmjs.org第三方库中查询。

使用gulp来进行代码的实现步骤

1. 创建一个 任务

1
2
3
gulp.task(任务名，function() {
     执行任务就是执行这个函数
 })

2. 确定要处理什么文件

1
2
3
4
gulp.task( 任务名, function () {
        // 执行任务就是在执行这个函数
        gulp.src( '文件名' )
} )

3. 利用第三方提供的 方法, 例如方法名是 handle

1
2
3
4
5
gulp.task( 任务名, function () { 
    // 执行任务就是在执行这个函数           
  gulp.src( '文件名' )
      .pipe( handle )
} )

4. 将处理的结果保存到某一个文件夹中, 例如 dist 文件夹

1
2
3
4
5
6
gulp.task( 任务名, function () {
  // 执行任务就是在执行这个函数
  gulp.src( '文件名' )
      .pipe( handle )
      .pipe( gulp.dest( 'dist' ) );
} );

具体案例分析

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
    --单个任务执行--
    -> 实现less转css的文件(提前下载好npm install gulp -g 和在需要实现代码转化的目录下下载npm install gulp，npm install gulp-less);
    -> 在该文件夹下建立一个src文件夹，里面放置需要置换的文件less文件，与此同时还需建立一个gulpfile.js文件，来编写如下的代码。
        var gulp = require('gulp');//需引入包
        var less = require('gulp-less');//需引入包
        gulp.task('default',function() {
            gulp.src('./src/*less')
            .pipe(less())
            .pipe(gulp.dest('dist'))
                    })
    -> 在linux下运行gulp文件即可。
    -> 注意：src文件路径，如果有两个文件夹或以上，则需gulp.src('./src/**/*less');
--gulp.watch 监视--
  该方法用于监视文件的变化, 当文件发生变化的时候可以触发一个行为
  gulp.watch( '文件匹配', [ 依赖任务 ], function () {} )