gulp是可以自动化执行任务的工具
在平时开发的流程里面,一定有一些任务需要手工重复得执行,只要你觉得有些动作是要重复去做的,就可以把这些动作创建成一个gulp任务,然后在特定的条件下自动执行.
比如在less源文件发生改变后自动编译成css文件
npmnpm install 去安装 gulp，注意加上一个 -g 的参数，表示在全局范围内去安装.sudo npm install gulp -g 并输入mac密码。$ npm install -g gulp
gulp --help
如果输出一些帮助的信息就表示可以gulp命令行成功安装了先打开命令行窗口并将当前路径定位到你指定的目录
mkdir learngulp
cd learngulp
npm init -y
npm install gulp --save
执行后的结果有两个
node_modules下安装本地的gulp库package.json文件里面"devDependencies": {
"gulp": "^3.9.0"
}
gulp的任务要放到一个叫 gulpfile.js 的文件里面
先在项目的根目录下面创建一个这样的文件
然后在这个文件的顶部添加下面这行代码
var gulp = require('gulp');
通过require可以把gulp模块引入当前项目并赋值给gulp变量
这样gulp这个变量里面就会拥有gulp的所有的方法了
可以使用gulp的task方法 同样我们去创建一个叫 hello 的任务，它要做的事就是在控制台上输出 "您好" 这两个字
gulp.task('hello', function () {
console.log('您好');
});
打开命令行工具，进入到项目所在的目录，然后输入：
$ gulp hello
会返回：
[21:36:34] Starting 'hello'...
您好
[21:36:34] Finished 'hello' after 959 μs
gulp后面跟着的是任务的名称
不输入任务名称的话会默认找default任务，找不到会报错
gulp的使用流程一般是
pipe方法导入到gulp的插件中 var gulp = require('gulp');
gulp.src('src/index.js') // 获取文件的流的api
.pipe(gulp.dest('dist')); // 写文件的api
gulp提供了一些很实用的接口，但本身并不能做太多的事情,其它实用的功能都是依靠插件来进行扩展的
npm install xxx --save-dev 安装插件less插件可以把less文件编译成css
$ npm install gulp-less --save-dev
var gulp = require('gulp');
var less = require('gulp-less');
gulp.task('less',function(){
return gulp.src('app/less/*.less')
.pipe(less())
.pipe(gulp.dest('dist/css'));
});
gulp.task('default',['less']);
自动加载所有的插件
module.exports = function () {
var $ = {};
var package = require('./package.json');
var devDependencies = package.devDependencies;
for (var attr in devDependencies) {//循环每个开发依赖
if (attr.startsWith('gulp-')) {//如果属性名是以gulp-开头的话,加载此模块并赋给$的属性 minifyHtml minify-html
$[toKey(attr)] = require(attr);
}
}
return $;
}
//把模块名转成属性名
function toKey(attr) {
return attr.slice(5).replace(/-(\w)/g, function () {
return arguments[1].toUpperCase();
})
}
这个插件可以把几个文件合并到一块
$ npm install gulp-concat --save-dev
var gulp = require('gulp');
var concat = require('gulp-concat');
gulp.task('concat',function(){
//指定要合并的文件glob
return gulp.src(['app/js/*.js','!app/js/*.tmp.js'])
//进行合并并指定合并后的文件名
.pipe(concat('app.js'))
//输出到目标路径
.pipe(gulp.dest('dist/js'));
});
gulp.task('default',['concat']);
合并后我们可以对JS文件进行压缩,最小化处理
此插件并不能压缩es6代码，需要编译成es5再压缩
$ npm install gulp-uglify --save-dev```javascript var gulp = require('gulp'); var concat = require('gulp-concat'); var uglify = require('gulp-uglify')
gulp.task('uglify',function(){
return gulp.src(['app/js/*.js','!app/js/*.tmp.js'])
//把多个JS文件合并成一个文件
.pipe(concat('app.js'))
//对合并后的app.js文件进行压缩
.pipe(uglify())
//输出到目的地
.pipe(gulp.dest('dist/js'));
});
gulp.task('default',['uglify']);
### 5.6 gulp-rename
在把处理好的文件存放到指定的位置之前，我们可以先去重新命名一下它
$ npm install gulp-rename --save-dev
```javascript
var gulp = require('gulp');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
gulp.task('uglify',function(){
//指定要处理的文件
return gulp.src(['app/js/*.js','!app/js/*.tmp.js'])
//合并成一个文件
.pipe(concat('app.js'))
//保存此文件
.pipe(gulp.dest('dist/js'))
//进行压缩
.pipe(uglify())
//对此文件进行重命名
.pipe(rename('app.min.js'))
//再输出一次
.pipe(gulp.dest('dist/js'));
});
gulp.task('default',['uglify']);
压缩css
$ npm install gulp-clean-css --save-dev
var gulp = require('gulp');
var less = require('gulp-less');
//在文件的顶部去包含这个插件，起个名字，叫做 minify
var cleanCss = require('gulp-minify-css');
var rename = require('gulp-rename');
gulp.task('minify',function(){
return gulp.src('app/less/page.less')//指定 less文件
.pipe(less())//把less编译成css
.pipe(gulp.dest('dist/css'))//输出到目的地
.pipe(cleanCss())//对 css再进行压缩
.pipe(rename('page.min.css'))//重命名
.pipe(gulp.dest('dist/css'));//输出到目的地
});
gulp.task('default',['less']);
html文件压缩
$ npm install gulp-minify-html --save-dev
var gulp = require('gulp'),
minifyHtml = require("gulp-minify-html");
gulp.task('minify-html', function () {
gulp.src('src/*.html') // 要压缩的html文件
.pipe(minifyHtml()) //压缩
.pipe(gulp.dest('dist/html'));//输出到目的地
});
动态自动插入生成后的js和css文件到html
npm install --save-dev gulp-inject
<!DOCTYPE html>
<html>
<head>
<title>My index</title>
<!-- inject:css -->
<!-- endinject -->
</head>
<body>
<!-- inject:js -->
<!-- endinject -->
</body>
</html>
var gulp = require('gulp');
var inject = require('gulp-inject');
gulp.task('index', function () {
var target = gulp.src('./src/index.html');
var sources = gulp.src(['build/**/*.js', 'build/**/*.css']);
return target.pipe(inject(sources,{ignorePath: 'build', addRootSlash: false}))
.pipe(gulp.dest('./build'));
});
可以使用此插件把es6的代码编译成es5的代码,plumber插件的作用是如果编译出错出并不会退出任务
npm install gulp-babel gulp-plumber --save
gulp.task('js', function () {
return gulp.src('src/js/*.js')//指定要处理的文件
.pipe(plumber())
.pipe(babel({presets:['es2015']}))
.pipe(concat('all.js'))//合并成一个文件
.pipe(gulp.dest('build/js'))//保存此文件
.pipe(uglify())//进行压缩
.pipe(rename('all.min.js'))//对此文件进行重命名
.pipe(gulp.dest('build/js'));//再输出一次
});
有些时候我们需要把文件放到本地服务器上去预览， gulp-connect可以帮我们创建一个本地服务器去运行我们的项目
npm install gulp-connect --save-dev
var gulp = require('gulp');
var connect = require('gulp-connect');
gulp.task('server',function(){
connect.server({
root:'dist',//服务器的根目录
port:8080 //服务器的地址，没有此配置项默认也是 8080
});
});
//运行此任务的时候会在8080上启动服务器，
gulp.task('default',['server']);
我们希望当文件变化的时候浏览器可以自动刷新，这样我们就不需要文件修改后手动去刷新浏览器了
var gulp = require('gulp');
var connect = require('gulp-connect');
gulp.task('copy-html',function(){
gulp.src('app/index.html')//指定源文件
.pipe(gulp.dest('dist'))//拷贝到dist目录
.pipe(connect.reload());//通知浏览器重启
});
gulp.task('watch',function(){
//当index.html文件变化时执行copy-html任务
gulp.watch('app/index.html',['copy-html']);
});
gulp.task('server',function(){
connect.server({
root:'dist',//服务器的根目录
port:8080, //服务器的地址，没有此配置项默认也是 8080
livereload:true//启用实时刷新的功能
});
});
//运行此任务的时候会在8080上启动服务器，
gulp.task('default',['server','watch']);
gulp.task('default', ['js', 'css', 'images',
'html', 'server', 'watch']);