要点:gulp和gulp-cli是分开的。gulp-cli调用本地gulp,本地gulp会运行Gulpfile.js
首先确保nodejs,npm,gulp-cli安装:
$ node --version
$ npm --version
$ npm install -g gulp-cli
$ gulp --version
初始化项目:
D:\test\gulp>npm init
添加开发依赖gulp到本地:
npm install --save-dev gulp
现在运行查看版本:
$ gulp --version
[14:51:10] CLI version 2.0.0
[14:51:10] Local version 3.9.1
接下来创建Gulpfile.js, 定义task。
var gulp = require('gulp');
gulp.task('test', function(){
console.log('Hello World');
})
运行
$ gulp test
[15:02:19] Using gulpfile D:\test\gulp\gulpfile.js
[15:02:19] Starting 'test'...
Hello World
[15:02:19] Finished 'test' after 497 μs
gulp.src: 创建输入流
gulp.dest: 创建输出流
拷贝文件的例子:
gulp.task('copy', function(){
return gulp.src('*.js').pipe(gulp.dest('dist'));
})
接下来运行 gulp copy。
安装Uglify 到本地:
npm install --save-dev gulp-uglify
下面的例子会压缩所有的js文件
var gulp = require('gulp');
var uglify = require('gulp-uglify');
gulp.task('scripts', function(){
return gulp.src('*.js')
.pipe(uglify())
.pipe(gulp.dest('dist'));
})
添加concat 模块
npm install --save-dev gulp-concat
下面的例子将所有js 文件合并到 bundle.js 中。
var gulp = require('gulp');
var concat = require('gulp-concat');
gulp.task('scripts', function(){
return gulp.src('*.js')
.pipe(concat('bundle.js'))
.pipe(gulp.dest('dist'));
})
Gulp watch
安装browser-sync到本地:
npm install --save-dev browser-sync
下面的例子会启动一个HTTP 服务器,并且监控dist 下面文件的变化,自动重新加载。可以访问 http://localhost:3000/
var gulp = require('gulp');
var bSync = require('browser-sync');
gulp.task('server', function(){
bSync({
server:{
baseDir:['dist']
}
});
gulp.watch('dist/**/*', bSync.reload);
})