Gulp笔记

要点：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。

扫描二维码关注公众号，回复： 3258269 查看本文章

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);
})

猜你喜欢