Gulp实战总结

Posted 2021-04-08 Node全栈

Gulp

---

什么是Gulp

gulp.js 是一种基于流的，代码优于配置的新一代构建工具。

Gulp 和 Grunt 类似。但相比于 Grunt 的频繁的 IO 操作，Gulp 的流操作，能更快地完成构建。

Gulp安装

---

Gulp基于 Node.js

npm install -g gulp
npm install —-save-dev gulp

hello world

---

create gulpfile and run hello world demo

var gulp = require('gulp');

gulp.task('default', function() {
    console.log('hello world')
});

then run

gulp

custom task with name compress

var gulp = require('gulp');

gulp.task('compress', function() {
    console.log('hello world')
});

then run

gulp compress

use uglify plugin

---

now we need to minify the js files,so we need uglify plugin

安装 gulp-uglify

npm install gulp-uglify --save-dev

--save-dev

see package.json

{
    devDependences:{
        'gulp-uglify':'*'
    }
}

this mean ....

use in gulpfile

---

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

gulp.task('default', function() {
    gulp.src('src/*.js')
        .pipe(uglify())   //压缩js
        .pipe(gulp.dest('dist'))
});

NOTE

• require

• usage

then run

gulp 

then open dist dir

open dist

check if lt_tab.js is compressed.

use rename plugin

---

we found its name is not *.min.js,so we need to rename the compressed result file name.

use gulp-rename npm

安装 gulp-rename

---

npm install gulp-rename --save-dev

--save-dev

see package.json

{
    devDependences:{
        'gulp-rename':'*'
    }
}

this mean ....

use in gulpfile

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


gulp.task('default', function() {
    gulp.src('src/*.js')
        .pipe(uglify())   //压缩js
        .pipe(rename(function (path) {
            path.extname = ".min.js"    //重命名压缩后的js
        }))
        .pipe(gulp.dest('dist'))
});

then run

gulp 

then open dist dir

open dist

check if lt_tab.min.js is existed.

使用watch

---

说明watch是内置的task，用于监控文件变动

var gulp = require('gulp');

gulp.task('default', function() {
  gulp.watch('./src/**/*', ['src']);
});

gulp.task('src', function(done) {
    console.log('gulp watch log info : src directory changed.');
});

启动gulp,然后修改index.js，控制台输入gulp watch log info : src directory changed.即代表成功

 demo5 git:(master) ✗ gulp 
[21:43:10] Using gulpfile ~/Workspace/github/js-tools-best-practice/gulp-demo/demo5/gulpfile.js
[21:43:10] Starting 'default'...
[21:43:10] Finished 'default' after 11 ms
[21:43:17] Starting 'src'...
gulp watch log info : src directory changed.

作业依赖

---

看demo6，和demo5的代码基本上一样

var gulp = require('gulp');

gulp.task('default',['watch'],function() {
    console.log('default task');
});

gulp.task('watch', function() {
  gulp.watch('./src/**/*', ['src']);
});

gulp.task('src', function(done) {
    console.log('gulp watch log info : src directory changed.');
});

注意

gulp.task('default',['watch'],function() {
    console.log('default task');
});

这里的task有3个参数，

1. default是方法名称，只有default比较奇怪，会默认调用。相当于c里的main方法

2. ['watch']这是依赖的作业列表，它们是由顺序的，按数组顺序依次执行

3. 第三个参数是成功执行完上面的依赖作业后执行的回调函数

改一下：

gulp.task('default',['watch','task_2','task_3'],function() {
    console.log('依赖作业终于执行完了，下面是我的舞台....');
});

concat

---

合并代码

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

gulp.task('default', function() {
    gulp.src('src/*.js')
        .pipe(uglify())
        .pipe(rename(function (path) {
            path.extname = ".min.js"
        }))
        .pipe(concat('trans.min.js'))
        .pipe(gulp.dest('toc/js'));
});

说明：会把src下得每个js都压缩，然后concat合并成一个trans.min.js，并放到toc/js目录下面

use with shelljs

---

see demo 8

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

require('shelljs/global');


gulp.task('default', function() {
    gulp.src('src/*.js')
        .pipe(uglify())
        .pipe(rename(function (path) {
            path.extname = ".min.js"
        }))
        .pipe(concat('trans.min.js'))
        .pipe(gulp.dest('toc/js'));

    cp('-R', 'lib/*', 'toc/lib/');
});

需求：我需要把lib下的所有js文件，放到toc/lib下，查看http://gulpjs.com/plugins/无和cp或copy有关的插件，so

用shell写的

cp -rf  lib/* toc/lib/

需要用到shelljs

cp('-R', 'lib/*', 'toc/lib/');

是不是很简单啊？

ShellJS is a portable (Windows/Linux/OS X) implementation of Unix shell commands on top of the Node.js API. You can use it to eliminate your shell script's dependency on Unix while still keeping its familiar and powerful commands. You can also install it globally so you can run it from outside Node projects - say goodbye to those gnarly Bash scripts!

http://documentup.com/arturadib/shelljs

reload usage

---

可以使用browsersync的gulp插件，这个比较方便

先安装依赖

npm install browser-sync gulp --save-dev

具体task写法

var gulp        = require('gulp');
var browserSync = require('browser-sync');

// Static server
gulp.task('browser-sync', function() {
    browserSync({
        server: {
            baseDir: "./"
        }
    });
});

更多api参见http://www.browsersync.io/docs/gulp/

git pages分支自动推送

---

详见[gulp-gh-pages插件教程]

• https://github.com/i5ting/gp-pages-import-test

项目实战

---

require('shelljs/global');

var gulp = require('gulp');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var concat  = require('gulp-concat');
var minify_css = require('gulp-minify-css');

/**
 * js minify
 */ 
gulp.task('js', function() {
    gulp.src('src/*.js')
        .pipe(uglify())
        .pipe(rename(function (path) {
            path.extname = ".min.js"
        }))
        .pipe(concat('trans.min.js'))
        .pipe(gulp.dest('toc/js'));

    cp('-Rf', 'lib/*', 'toc/lib/');
});

/**
 * clean js && css dist
 */ 
gulp.task('clean', function() {
    rm('-rf', 'toc/css');
    rm('-rf', 'toc/js');
});


/**
 * css minify
 */ 
gulp.task('css', function() {
    rm('-rf', 'toc/css');

  gulp.src('css/*.css')
    .pipe(minify_css({keepBreaks:false}))
        .pipe(concat('trans.min.css'))
    .pipe(gulp.dest('toc/css'));

    cp('-Rf', 'css/zTreeStyle', 'toc/css/');
});


/**
 * default
 */ 
gulp.task('default', ['clean','js','css']);

这是我自己的项目里使用的。其实clean应该有插件的。这里用shelljs写的，大同小异。