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'])
})