gulp@3.9.0学习

gulp@3.9.0学习

安装gulp@3.9.1

gulp@3.9.1需要与node版本配合，实测node@11.13.0可用

npm i gulp@3.9.1 -g		//全局安装gulp	
npm i gulp@3.9.1 -D		//本地安装开发依赖gulp

安装其他插件

gulp-concat			//合并文件（js/css）
gulp-uglify			//压缩js文件
gulp-rename			//文件重命名
gulp-less			//编译less
gulp-clean-css		//压缩css
gulp-htmlmin		//压缩html	
gulp-livereload		//实时自动编译刷新
gulp-connect		//生成服务器
open				//打开指定链接

gulp任务

1. 引入插件

这一步将需要用到的插件全部引入

//引入插件
var gulp = require('gulp');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var less = require('gulp-less');
var cssClean = require('gulp-clean-css');
var htmlmin = require('gulp-htmlmin');
var livereload = require('gulp-livereload');
var connect = require('gulp-connect');
var open = require('open')

2. 合并压缩js

//注册合并压缩js的任务
gulp.task('js', function () {
    return gulp.src('src/js/*.js')		//找到目标文件，将数据读取到gulp的内存中
        .pipe(concat('build.js'))		//合并目标文件为build.js文件
        .pipe(gulp.dest('dist/js/'))    //将build.js输出到'dist/js'文件夹下，如果要压缩js文件这一步可以省略
        .pipe(uglify())                 //压缩build.js文件
        .pipe(rename({ suffix: '.min' })) //重命名build.js文件，添加'.min'后缀
        .pipe(gulp.dest('dist/js/'))    //将build.min.js输出到'dist/js'文件夹下
        .pipe(livereload())             //实时刷新(配合watch任务)
        .pipe(connect.reload())         //服务器实时刷新(配合server任务)
})

3. less转换为css

//注册编译less任务
gulp.task('less', function () {
    return gulp.src('src/less/*.less')
        .pipe(less())                   //编译less文件为css文件
        .pipe(gulp.dest('src/css/'))    //将编译好的css文件输出到'src/css/'文件夹下
        .pipe(livereload())             //实时刷新(配合watch任务)
        .pipe(connect.reload())         //服务器实时刷新(配合server任务)
})

4. 合并压缩css，这一步需要等less任务执行完后再执行

//注册合并压缩css任务，这一步应该等less任务执行完才执行
gulp.task('css', ['less'], function () {
    return gulp.src('src/css/*.css')
        .pipe(concat('build.css'))              //合并css文件为build.css
        .pipe(rename({ suffix: '.min' }))          //重命名build.css文件为build.min.css
        .pipe(cssClean({ compatibility: 'ie8' }))  //压缩build.min.css文件
        .pipe(gulp.dest('dist/css/'))           //将build.min.css文件输出
        .pipe(livereload())             //实时刷新(配合watch任务)
        .pipe(connect.reload())         //服务器实时刷新(配合server任务)
})

5. 压缩html

//注册压缩html任务
gulp.task('html', function () {
    return gulp.src('index.html')
        .pipe(htmlmin({ collapseWhitespace: true }))
        .pipe(gulp.dest('dist/'))
        .pipe(livereload())             //实时刷新(配合watch任务)
        .pipe(connect.reload())         //服务器实时刷新(配合server任务)
})

6. 注册默认任务

//注册默认任务
gulp.task('default', ['js', 'less', 'css', 'html'])

7. 注册watch监听任务（半自动）

只要目标文件发生改变，就启动相应的任务

//注册监听任务，只要目标文件发生改变就启动相应的任务(半自动)
gulp.task('watch', ['default'], function () {
    livereload.listen();            //开启监听
    //确认监听的目标以及绑定相应的任务
    gulp.watch('src/js/*.js', ['js']);
    gulp.watch(['src/css/*.css', 'src/less/*.less'], ['css']);
    gulp.watch('index.html', ['html'])
})

8. 注册server监听任务（全自动）

自动打开指定服务器，且实时刷新

//注册监听任务(全自动)
gulp.task('server', ['default'], function () {
    //配置服务器
    connect.server({
        root: 'dist/',
        livereload: true,   //实时刷新
        port: 5000
    })

    //打开指定链接
    open('http://localhost:5000/');
    
    //确认监听的目标以及绑定相应的任务
    gulp.watch('src/js/*.js', ['js']);
    gulp.watch(['src/css/*.css', 'src/less/*.less'], ['css']);
    gulp.watch('index.html', ['html'])
})

gulp-load-plugins插件

该插件可以批量引入package.json中的插件，有了它就不用再手动引入每个gulp插件了

gulpfile.js

//引入插件
var gulp = require('gulp');
var open = require('open');
var $ = require('gulp-load-plugins')();

//注册合并压缩js的任务
gulp.task('js', function () {
    return gulp.src('src/js/*.js')		//找到目标文件，将数据读取到gulp的内存中
        .pipe($.concat('build.js'))		//合并目标文件为build.js文件
        .pipe(gulp.dest('dist/js/'))    //将build.js输出到'dist/js'文件夹下，如果要压缩js文件这一步可以省略
        .pipe($.uglify())                 //压缩build.js文件
        .pipe($.rename({ suffix: '.min' })) //重命名build.js文件，添加'.min'后缀
        .pipe(gulp.dest('dist/js/'))    //将build.min.js输出到'dist/js'文件夹下
        .pipe($.connect.reload())         //服务器实时刷新
})

//注册编译less任务
gulp.task('less', function () {
    return gulp.src('src/less/*.less')
        .pipe($.less())                   //编译less文件为css文件
        .pipe(gulp.dest('src/css/'))    //将编译好的css文件输出到'src/css/'文件夹下
        .pipe($.connect.reload())         //服务器实时刷新
})

//注册合并压缩css任务，这一步应该等less任务执行完才执行
gulp.task('css', ['less'], function () {
    return gulp.src('src/css/*.css')
        .pipe($.concat('build.css'))              //合并css文件为build.css
        .pipe($.rename({ suffix: '.min' }))          //重命名build.css文件为build.min.css
        .pipe($.cleanCss({ compatibility: 'ie8' }))  //压缩build.min.css文件
        .pipe(gulp.dest('dist/css/'))           //将build.min.css文件输出
        .pipe($.connect.reload())         //服务器实时刷新
})

//注册压缩html任务
gulp.task('html', function () {
    return gulp.src('index.html')
        .pipe($.htmlmin({ collapseWhitespace: true }))
        .pipe(gulp.dest('dist/'))
        .pipe($.connect.reload())         //服务器实时刷新
})

//注册默认任务
gulp.task('default', ['js', 'less', 'css', 'html'])

//注册监听任务(全自动)
gulp.task('server', ['default'], function () {
    //配置服务器
    $.connect.server({
        root: 'dist/',
        livereload: true,   //实时刷新
        port: 5000
    })

    //打开指定链接
    open('http://localhost:5000/');

    //确认监听的目标以及绑定相应的任务
    gulp.watch('src/js/*.js', ['js']);
    gulp.watch(['src/css/*.css', 'src/less/*.less'], ['css']);
    gulp.watch('index.html', ['html'])
})