gulp 使用介绍

2022-05-24 12:39:14

gulp 使用介绍

  • gulp
  • gulp 插件
  • gulp的配置文件gulpfile.js
  • gulp 语法
  • gulp 实例
  • gulp的缺点

gulp

gulp是基于Node.js的前端自动化构建工具，主要用于代码打包。目前主流的前端打包工具，grunt，gulp，webpack。grunt现在似乎慢慢被gulp取代，而我使用gulp也是冲着大家说的配置简单去的，至于通道流，运行文件什么的其实还是次要的；webpack现在很火，听说功能强大，没有用过。

npm install gulp -g

注意需要在npm全局中安装gulp，否则命令窗口中找不到gulp快捷命令，记得检查环境变量的配置情况。

gulp 插件

gulp的使用离不开gulp插件的使用，下面是常用的几款。

npm install del gulp gulp-concat gulp-minify-css gulp-replace gulp-uglify gulp-rev gulp-rev-collector --save-dev

  • del 和 gulp-clean

    del是node.js的插件，两者的效果相似，都是用来清除文件。至于为什么使用 del，而不是 gulp-clean，我是看到网上一篇文章推荐的。

  • gulp-concat

    gulp-concat用来做文件合并，可以将多个文件合并成一个文件，减少静态资源数量。

  • gulp-minify-css

    gulp-minify-css是css的压缩工具。

  • gulp-uglify

    gulp-uglify是js的压缩工具。官方文档上是这么写的 “Minify files with UglifyJS.”

  • gulp-replace

    gulp-replace是一个文本修改插件，我们一般用来做文件内容的的修改，常用的是路径修改。

  • gulp-rev和gulp-rev-collector

    gulp-rev和gulp-rev-collector，并没有用到，这里只做标示。这两个插件可以用来处理文件名，同时生成一个json文件保存修改前的文件名和修改后的文件名，并且自动处理文件中的修改，例如图片文件至于css文件。

  • gulp-connect

    gulp-connect : 这个插件会启动一个 Http Server (with LiveReload)。

gulp的配置文件gulpfile.js

gulp依赖于配置文件gulpfile.js，在运行目录下需要手动创建gulpfile.js，gulp的任务执行代码会调用gulpfile.js。

gulp 语法

gulp的语法很简单，功能实现依赖于各种插件，所以学习上成本很低。gulp的语法其实就是是nodejs的语法。

  • 声明依赖的插件
var gulp = require('gulp');

var minifycss = require('gulp-minify-css');

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

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

var del = require('del');

var replace = require('gulp-replace');
  • 定义任务（task）
gulp.task('taskName', function() {

});

//default是默认task，当命令行缺省调用时会执行default任务。

gulp.task('default', []);
  • 命令行调用任务（task）
gulp taskName // 直接调用具体的task

gulp    //调用默认的default，如果没用会报错

  • 多个任务合并

    gulp.task('default', ['task1', 'task2', 'task3', 'task4']);

  • 文件拷贝语法

    gulp.src('oldPath/images/*.*')
    
  .pipe(gulp.dest(newPath+'/images'));

  • 文件合并且压缩语法

    //css文件
    
gulp.src(['app/assets/styles/style.css',
    
          'app/assets/styles/public.css',
    
          'app/assets/styles/page.css',
    
          'app/assets/styles/jquery-ui-1.10.3.css'])
    
  .pipe(concat('style.css'))
    
  .pipe(minifycss())
    
  .pipe(gulp.dest(newPath));
    
//js文件
    
gulp.src([
    
      'app/components/*/*.js'
    
  ])
    
  .pipe(concat('components.js'))
    
  .pipe(uglify())
    
  .pipe(gulp.dest(newPath));

  • 文本修改

    gulp.task('demo-replace', function(){
    
  gulp.src(demoDir+'/index.html')
    
    .pipe(replace('<link rel="stylesheet">', ''))  //删除
    
    .pipe(replace(/\.\.\/assets\//g, ''))                //正则替换
    
    .pipe(replace(/\.\.\/images/g, 'images'))
    
    .pipe(gulp.dest(newPath));

  • 目录清理

    gulp.task('clean', function(cb){
    
  del(rootPath, cb);
    
});

gulp 实例

var gulp = require('gulp');

var minifycss = require('gulp-minify-css');

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

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

var del = require('del');

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

var root = 'dist';

var partnerDir = root + '/partners';

gulp.task('partners', function() {

    gulp.src('app/assets/images/*.*')

        .pipe(gulp.dest(partnerDir+'/images'));

    gulp.src(['app/assets/styles/style.css',

              'app/assets/styles/public.css',

              'app/assets/styles/page.css',

              'app/assets/styles/jquery-ui-1.10.3.css'])

        .pipe(concat('style.css'))

        .pipe(minifycss())

        .pipe(gulp.dest(partnerDir));

    gulp.src(['app/assets/js/jquery-1.11.1.min.js',

            'app/assets/js/jquery-ui-1.10.3.js',

            'app/assets/js/bootstrap.js',

            'app/assets/js/echarts.js'])

        .pipe(uglify())

        .pipe(gulp.dest(partnerDir+'/js'));

    gulp.src('app/partners/modules/*/*.html')

        .pipe(gulp.dest(partnerDir+'/modules'));

    gulp.src([

        'app/bower_components/angular/angular.js',

        'app/bower_components/angular-ui-router/release/angular-ui-router.min.js',

        'app/bower_components/angular-resource/angular-resource.js',

        'app/bower_components/angular-cookies/angular-cookies.js',

        'app/bower_components/angular-messages/angular-messages.min.js'

        ])

        .pipe(uglify())

        .pipe(gulp.dest(partnerDir+'/bower_components'));

    gulp.src([

            'app/components/services/*.js',

            'app/components/directives/*.js'

        ])

        .pipe(concat('components.js'))

        .pipe(uglify())

        .pipe(gulp.dest(partnerDir));

    gulp.src(['app/partners/modules/*/*.js',

        .pipe(concat('modules.js'))

        .pipe(uglify())

        .pipe(gulp.dest(partnerDir));

    gulp.src('app/partners/*.js')

        .pipe(uglify())

        .pipe(gulp.dest(partnerDir))

    gulp.src('app/partners/*.html')

        .pipe(gulp.dest(partnerDir))

});

gulp.task('partners-replace', function(){

    gulp.src(partnerDir+'/index.html')

        //styles

        .pipe(replace('<link rel="stylesheet" href="../assets/styles/public.css">', ''))

        .pipe(replace('<link rel="stylesheet" href="../assets/styles/jquery-ui-1.10.3.css">', ''))

        .pipe(replace('<link rel="stylesheet" href="../assets/styles/style.css">', '<link rel="stylesheet" href="style.css">'))

        //bower_components

        .pipe(replace('<script src="../bower_components/angular/angular.js"></script>',

                                    '<script src="bower_components/angular.js"></script>'))

        .pipe(replace('<script src="../bower_components/angular-ui-router/release/angular-ui-router.min.js"></script>',

                                    '<script src="bower_components/angular-ui-router.min.js"></script>'))

        .pipe(replace('<script src="../bower_components/angular-resource/angular-resource.js"></script>',

                                    '<script src="bower_components/angular-resource.js"></script>'))

        .pipe(replace('<script src="../bower_components/angular-cookies/angular-cookies.js"></script>',

                                    '<script src="bower_components/angular-cookies.js"></script>'))

        .pipe(replace('<script src="../bower_components/angular-messages/angular-messages.min.js"></script>',

                                    '<script src="bower_components/angular-messages.min.js"></script>'))

        //components

        .pipe(replace('...', '<script src="components.js"></script>'))

        //modules

        .pipe(replace('...', '<script src="modules.js"></script>'))    

        .pipe(gulp.dest(partnerDir)); 

  gulp.src(partnerDir+'/*.*')

      .pipe(replace(/\.\.\/assets\//g, ''))

      .pipe(replace(/\.\.\/images/g, 'images'))

      .pipe(gulp.dest(partnerDir)); 

  gulp.src(partnerDir+'/modules/*/*.html', { base: 'modules' })

      .pipe(replace(/\.\.\/assets\//g, ''))

      .pipe(replace(/\.\.\/images/g, 'images'))

      .pipe(gulp.dest('modules')); 

})

gulp.task('clean', function(cb){

    del(root, cb);

});

gulp.task('replace',[ 'partners-replace']);

gulp.task('default', [ 'partners']);

gulp的缺点

  • 问题很难定位，运行中间没有办法debug，console.log() 也不能很好的定位问题。
  • task串行执行有问题。

--20161125 补充------------------------

task 串行执行没有问题，当前一些细节没有注意到。每个 task 的 function 是都要有 return 的。没写 return 就会发现有时候会出错。

上一篇：SQL调用WebService接口


下一篇：Centos常用命令之：文件与目录管理