前端工程自动化构建（一）— gulp

目录

一、gulp简介和安装
二、开始使用gulp
三、gulp常用Api
四、gulp常用插件
五、附demo源码

更多资源请移步https://www.uplusmeta.com/M!1044693/

一、gulp简介和安装

gulp是一个自动化构建工具，基于 node 强大的流(stream)能力，拥有丰富和精简的API和插件。gulp 将开发流程中让人痛苦或耗时的任务自动化，从而减少你所浪费的时间、创造更大价值。
废话不多说，让我们开始领略gulp的强大之处。

首先确保你已经正确安装了nodejs环境。
关于怎么安装nodejs,请移步https://blog.csdn.net/qq_39425927/article/details/103214779
1、全局安装

npm install --global gulp

2、打开你所在的项目，作为项目得开发依赖安装

npm install --save-dev gulp

二、开始使用gulp

在项目根目录下创建一个名为 gulpfile.js 的文件：

开始编写gulpfile.js，使用require引入模块

var gulp = require('gulp');

gulp.task('taskname', function() {
  // 将你的默认的任务代码放在这
});

执行任务
到对应项目的下 使用gulp命令执行任务
例如：gulp taskname

三、gulp常用Api

1、task(name,function(){})：定义gulp任务。

gulp.task('task1', function(done){                 //定义了一个task1的任务
    done()
});

2、src() ：创建一个流，gulp是基于流的，这个流用于从文件中读取一个虚拟对象。

gulp.src('./js/main.js') 

3、dest() ：也是用于创建一个流，不过该流用于将虚拟对象写入文件系统的流。

 gulp.src('./js/main.js')                  //读取了一个main.js存为虚拟对象
       .pipe(gulp.dest('./dist/js/'));         //将这个虚拟对象写入dist的js文件中

4、watch()：用于监听文件的变化

gulp.watch('Resource/Sinotsing/js/*.js', gulp.series(['masterScripts', 'Scripts']));

注意：gulp 4.0以上版本，使用gulp.series执行多个任务

四、gulp常用插件

1、压缩js
安装gulp-uglify

npm install gulp-uglify --save-dev

创建压缩任务

var uglify = require("gulp-uglify");
gulp.task('scripts',function(done){
	gulp.src('./main.js')
	    .pipe(uglify())                 // 直接压缩main.js
	    .pipe(gulp.dest('./dist'))
	done()
})

2、合并文件
安装gulp-concat

npm install gulp-concat  --save-dev

创建合并任务

var gulp_concat = require("gulp-uglify");
gulp.task('concatfile',function(done){
	gulp.src('[./main.jsrename,./script2.js]')
	   .pipe(gulp_concat('main..min.js'))                 // 合并main.js 和 script2 为 main.min.js
	    .pipe(gulp.dest('./dist'))
	done()
})

3、重命名文件。
安装gulp_rename

npm install gulp-rename --save-dev

对文件重命名

var rename = require("gulp-rename");
gulp.task('resetname',function(done){
gulp.src('./main.js')
    .pipe(uglify())    
    .pipe(({ suffix: '.min' }))             // 重名名文件，输出为main.min.js
    .pipe(gulp.dest('./dist'))
})

4、压缩css文件。
安装gulp-minify-css

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

压缩css文件

var mincss = require("gulp-minify-css");
gulp.task('styles',function(done){
gulp.src('./style.js')
    .pipe(mincss())          // 压缩style.css
    .pipe(gulp.dest('./dist/css'))
})

5、压缩图片。
安装gulp-imagemin

npm insatall gulp-imagemin --save=dev

压缩图片

gulp.task('image', function (done) {
    gulp.src('Resource/Sinotsing/Images/*') //压缩image里的所有图片
        .pipe(imagemin())
        .pipe(gulp.dest('Resource/dist/images'))
    done();
})

6、less转css
安装gulp-less

npm insatall gulp-less --save-dev

使用gulp-less将less 文件输出为css

var less = require("gulp-less");
gulp.task('styles',function(done){
gulp.src('./style.less')
    .pipe(less())          // 压缩style.less 转为style.css
    .pipe(gulp.dest('./dist/css'))
})

由于篇幅原因，其他还有插件不相近列出，请移步gulp手册https://www.gulpjs.com.cn/docs/getting-started/quick-start/

五、demo源码

var gulp = require('gulp');
//压缩模块
var gulp_uglify = require('gulp-uglify');
//检查错误模块
var gulp_util = require('gulp-util');
//合并模块
var gulp_concat = require('gulp-concat');
//重命名模块
var rename = require('gulp-rename');
//gulp_sourcemaps模块
var gulp_sourcemaps = require('gulp-sourcemaps');
//less转css模块
var gulp_less = require('gulp-less');
//css压缩模块
var gulp_minify = require('gulp-minify-css');
//压缩图片模块
var imagemin = require('gulp-imagemin');

//压缩mater js
gulp.task('masterScripts', function (done) {
    gulp.src(['Resource/Js/jquery.1.12.3min.js', 'Resource/Sinotsing/JS/velocity.js', 'Resource/Sinotsing/JS/shutter.js', 'Resource/Sinotsing/JS/master.js'])
        .pipe(gulp_sourcemaps.init())
        .pipe(gulp_concat('main..min.js'))
        .pipe(gulp_uglify(
            {
                compress: {
                    drop_console: true,
                    drop_debugger: true
                }
            }
        ))
        .on('error', function (err) {
            gulp_util.log(gulp_util.colors.red('[Error]'), err.toString());
        })
        .pipe(gulp_sourcemaps.write('.'))
        .pipe(gulp.dest('Resource/dist/js'));
    done();
})

//压缩其余的js
gulp.task('Scripts', function (done) {
    gulp.src('Resource/Sinotsing/JS/*.js')
        .pipe(gulp_uglify(
            {
                compress: {
                    drop_console: true,
                    drop_debugger: true
                }
            }
        ))
        .on('error', function (err) {
            gulp_util.log(gulp_util.colors.red('[Error]'), err.toString());
        })
        .pipe(rename({ suffix: '.min' }))
        .pipe(gulp.dest('Resource/dist/js'));
    done();
})

//压缩图片模块
gulp.task('image', function (done) {
    gulp.src('Resource/Sinotsing/Images/*')
        .pipe(imagemin())
        .pipe(gulp.dest('Resource/dist/images'))
    done();
})

//压缩css
gulp.task('css', function (done) {
    gulp.src('Resource/Sinotsing/CSS/*.less')
        .pipe(gulp_sourcemaps.init())
        .pipe(gulp_less())
        .pipe(gulp_minify())
        .on('error', function (err) {
            gulp_util.log(gulp_util.colors.red('[Error]'), err.toString());
        })
        .pipe(rename({ suffix: '.min' }))
        .pipe(gulp_sourcemaps.write('.'))
        .pipe(gulp.dest('Resource/dist/css'));
    done()
})
//默认任务
gulp.task('default',function (done) {
    gulp.watch('Resource/Sinotsing/js/*.js', ['masterScripts', 'Scripts']);
    gulp.watch('RResource/Sinotsing/Images/*', ['image']);
    gulp.watch('Resource/Sinotsing/CSS/*.less', ['css']);
    done();
});
//监听任务
gulp.task('watch', function (done) {
    gulp.watch('Resource/Sinotsing/js/*.js', gulp.series(['masterScripts', 'Scripts']));
    gulp.watch('RResource/Sinotsing/Images/*', gulp.series(['image']));
    gulp.watch('Resource/Sinotsing/CSS/*.less', gulp.series(['css']));
    done();
})