项目自动化构建工具 - gulp

gulp 是基于 node 实现 Web 前端自动化开发的工具，利用它能够极大的提高开发效率。

使用gulp前需要安装node，npm。

一、安装gulp：

1、全局安装gulp

npm install gulp -g

2、局部安装（项目内）

npm install gulp --save-dev

二、gulp项目配置文件

在项目下新建 gulpfile.js

配置基本内容：

var gulp = require('gulp');


// 注册一个任务
gulp.task('taskName', function(){
    console.log('执行回调')
})


// 默认任务，执行gulp时自动执行
gulp.task('default',function(){
    console.log('执行回调')
});

运行默认任务：

gulp default    // 默认任务 default可以省略
gulp

运行自定义的任务

gulp taskName

三、合并压缩 js

压缩 js文件需要安装gulp插件：gulp-uglify

npm install gulp-uglify --save-dev

合并 js文件需要安装gulp插件： gulp-concat

npm install gulp-concat --save-dev

合并压缩 js文件的配置：

var gulp = require('gulp');
var uglify = require('gulp-uglify');    // js压缩插件
var concat = require('gulp-concat');    // 合并插件
var rename = require('gulp-rename');    // 重命名插件




// 注册js合并压缩任务
gulp.task('js', function(){
    return gulp.src('js/**/*.js')            // 引入 js/**/下的所有需要压缩的js文件
        .pipe(concat('build.js'))            // 合并后的命名
        .pipe(gulp.dest('dist/js/'))         // 合并后的输出路径
        .pipe(uglify())                      // 执行压缩
        .pipe(rename({ suffix: '.min' }))    // 压缩后的名称，拓展压缩后的后缀添加 .min
        .pipe(gulp.dest('dist/js/'))         // 合并压缩后的输出路径（会继承以上管道的内容）
});


// 默认任务
gulp.task('default',['js']);

四、合并压缩css。gulp-clean-css 和 gulp-minify-css 皆可

合并压缩css文件需要安装的gulp插件（合并后压缩）：gulp-clean-css

npm install gulp-clean-css --save-dev

合并压缩css文件需要安装的gulp插件（合并后压缩）： gulp-minify-css

npm install gulp-minify-css --save-dev

合并压缩 css文件的配置：

var gulp = require('gulp');
var concat = require('gulp-concat');         // 合并插件
var cssClean = require('gulp-clean-css');    // 引入css压缩插件（两者皆可）
var minifycss = require('gulp-minify-css');  // 引入css压缩插件（两者皆可）
var rename = require('gulp-rename');         // 引入重命名插件




// 注册css的合并压缩任务
gulp.task('css', function () {
    return gulp.src('css/*.css')                // 获取css源文件
        .pipe(concat('build.css'))              // 合并后的命名
        .pipe(gulp.dest('dist/css/'))           // 合并后输出路径
        .pipe(minifycss())                      // 压缩合并后的css
        .pipe(rename({ suffix: '.min' }))       // 压缩后重命名，拓展添加后缀.min
        .pipe(gulp.dest('dist/css/'))           // 压缩后的输出路径
});


// 默认任务
gulp.task('default',['css']);

 

五、编译less。（将less预处理语言编译成css）

编译less需要安装gulp插件： gulp-less

npm install gulp-less --save-dev

编译less的配置:

var gulp = require('gulp');
var rename = require('gulp-less');         // 引入less编译插件




// 注册less的编译任务
gulp.task('less',function () {
    return gulp.src('less/*.less')    // 获取less源文件
        .pipe(less())                 // 将less编译为css
        .pipe(gulp.dest('css/'))      // 输出文件路径
});


// 默认任务
gulp.task('default',['less']);

 

六、压缩html文件

压缩html文件需要安装的插件： gulp-htmlmin

npm install gulp-htmlmin --save-dev

压缩html文件的配置：

var gulp = require('gulp');
var htmlmin = require('gulp-htmlmin');         // 引入html的压缩插件




// 注册html的压缩任务
gulp.task('html', function () {
    return gulp.src('*.html')                            // 获取源文件
        .pipe(htmlmin({collapseWhitespace:true,}))       // 是否去除标签之间的空白
        .pipe(gulp.dest('dist/'))                        // 文件输出路径
});


// 默认任务
gulp.task('default',['html']);

 

 

七、监视文件修改自动进行压缩合并编译

需要安装插件： gulp-livereload

npm install gulp-livereload --save-dev

配置方式：

var gulp = require('gulp');
var uglify = require('gulp-uglify');
var concat = require('gulp-concat');
var rename = require('gulp-rename');
var cssClean = require('gulp-clean-css');
var minifycss = require('gulp-minify-css');
var less = require('gulp-less');
var htmlmin = require('gulp-htmlmin');
var livereload = require('gulp-livereload');



// 注册js合并压缩任务
gulp.task('js', function(){
    return gulp.src('js/*.js')
        .pipe(concat('build.js'))
        .pipe(gulp.dest('dist/js/'))
        .pipe(uglify())
        .pipe(rename({ suffix: '.min' }))
        .pipe(gulp.dest('dist/js/'))
        .pipe(livereload())        // 需要为每个任务添加监视
});

// 注册less的编译任务
gulp.task('less',function () {
    return gulp.src('less/*.less')
        .pipe(less())   // 将less编译为css
        .pipe(gulp.dest('css/'))
        .pipe(livereload())       // 需要为每个任务添加监视
});

// 注册css的合并压缩任务
gulp.task('css', function () {
    return gulp.src('css/*.css')
        .pipe(concat('build.css'))
        .pipe(gulp.dest('dist/css/'))
        .pipe(minifycss())
        .pipe(rename({ suffix: '.min' }))
        .pipe(gulp.dest('dist/css/'))
        .pipe(livereload())       // 需要为每个任务添加监视
});

// 注册html的压缩任务
gulp.task('html', function () {
    return gulp.src('*.html')
        .pipe(htmlmin({collapseWhitespace:true,}))
        .pipe(gulp.dest('dist/'))
        .pipe(livereload())       // 需要为每个任务添加监视
});

// 注册自动任务（半自动）  
gulp.task('watch',function () {
    livereload.listen();    // 开始监听
    gulp.watch('js/*.js',gulp.series('js'))
    gulp.watch('less/*.less',gulp.series('less','css'))
    gulp.watch('css/*.css',gulp.series('css'))
    gulp.watch('*.html',gulp.series('html'))
});



gulp.task('default',['js','less','css','html','watch']);

 

八、热更新（监视文件更新，编译合并压缩后并且自动刷新浏览器中打开的页面）

安装所需插件

npm install gulp-connect --save-dev

配置方式:

var gulp = require('gulp');
var uglify = require('gulp-uglify');
var concat = require('gulp-concat');
var rename = require('gulp-rename');
var cssClean = require('gulp-clean-css');
var minifycss = require('gulp-minify-css');
var less = require('gulp-less');
var htmlmin = require('gulp-htmlmin');
var connect = require('gulp-connect');



// 注册js合并压缩任务
gulp.task('js', function(){
    return gulp.src('js/*.js')
        .pipe(concat('build.js'))
        .pipe(gulp.dest('dist/js/'))
        .pipe(uglify())
        .pipe(rename({ suffix: '.min' }))
        .pipe(gulp.dest('dist/js/'))
        .pipe(connect.reload())        // 给每一个任务添加监视
});

// 注册less的编译任务
gulp.task('less',function () {
    return gulp.src('less/*.less')
        .pipe(less())   // 将less编译为css
        .pipe(gulp.dest('css/'))
        .pipe(connect.reload())        // 给每一个任务添加监视
});

// 注册css的合并压缩任务
gulp.task('css', function () {
    return gulp.src('css/*.css')
        .pipe(concat('build.css'))
        .pipe(gulp.dest('dist/css/'))
        .pipe(minifycss())
        .pipe(rename({ suffix: '.min' }))
        .pipe(gulp.dest('dist/css/'))
        .pipe(connect.reload())        // 给每一个任务添加监视
});

// 注册html的压缩任务
gulp.task('html', function () {
    return gulp.src('*.html')
        .pipe(htmlmin({collapseWhitespace:true,}))
        .pipe(gulp.dest('dist/'))
        .pipe(connect.reload())        // 给每一个任务添加监视
});


// 注册服务器自动更新任务（全自动）
gulp.task('connect',function () {
    // 配置服务器
    connect.server({
        root: 'dist/',  // 配置源文件根目录
        port: '8888',   // 配置端口
        livereload: true,   // 是否自动更新
    })
    gulp.watch('js/*.js',['js'])
    gulp.watch('less/*.less',['less','css'])
    gulp.watch('css/*.css',['css'])
    gulp.watch('*.html',['html'])

});

gulp.task('default',['js','less','css','html','connect']);

 

九、实现跨域

在服务器模式基础上进行实现跨域。

1、安装插件：http-proxy-middleware。

npm install --save-dev http-proxy-middleware

2、引入插件

var proxy = require('http-proxy-middleware');

3、引用示例

// 注册服务器自动更新任务（全自动）
gulp.task('connect',function () {
    // 配置服务器
    connect.server({
        root: 'dist',  // 配置源文件根目录
        port: '8888',   // 配置端口
        livereload: true,   // 是否自动更新

        middleware: function () {    // 作为中间件引用
            return [           // 返回的是一个数组，可定义多个域名代理
                proxy("/api",{        // 跨域域名前缀，前面加入此前缀可代理以下定义的域名
                    target:"https://yourdmain.com/",      // 代理的域名  
                    changeOrigin:true
                })
            ]
        }

    })
    gulp.watch('js/*.js',gulp.series('js'))
    gulp.watch('less/*.less',gulp.series('less','css'))
    gulp.watch('css/*.css',gulp.series('css'))
    gulp.watch('*.html',gulp.series('html'))
});

 

十、gulp4.0与gulp3.0的差异

任务依赖的编写方式有所改变

gulp3.0书写方式：

gulp.task('default',['js','less','css','html','connect'], function(){});

gulp4.0书写方式()：

// 任务同步执行
gulp.task('default',gulp.series(['js','less','css','html','connect'], function(){}));

// 任务异步执行
gulp.task('default',gulp.parallel(['js','less','css','html','connect'], function(){}));

gulp4.0以后task方式只接受两个参数

 

 

注：不喜勿喷，欢迎讨论