gulp简要教程

1.生成package.json
1)npm init
name: (gulp) 项目名称,默认以文件夹名称作为项目名称，直接回车即可。
version: (1.0.0) 项目版本号
description: 项目描述
entry point: (index.js)
test command: 测试的命令
git repository: git的版本库
keywords: 关键词
author: 作者
license: (ISC)


填好上面的数据后，cmd会列出要创建的json数据的内容 ：
About to write to C:AppServwwwgulppackage.json:


{
 "name": "gulp",
 "version": "0.0.1",
 "description": "demo",
 "main": "index.js",
 "scripts": {
   "test": "echo "Error: no test specified" && ex
 },
 "author": "tianxie",
 "license": "ISC"
}




Is this ok? (yes)


如果没问题的话，按下回车即可创建package.json文件
_____________________________________________________________________________


2.在项目生成gulp
npm install gulp --save-dev/cnpm install gulp --save-dev
执行后，会在项目的文件夹中生成一个node_modules文件夹
_____________________________________________________________________________


3.创建任务
var gulp = require('gulp');
gulp.task('hello', function(){
console.log('hello');
});


导入gulp，然后使用task函数来创建任务。task的第一个参数代表任务的名字，第二个参数是一个函数，可以在里面写逻辑。
然后在cmd下输入gulp hello，hello就是任务的名字。
然后控制台会输出 ：
C:AppServwwwgulp>gulp hello
[14:47:03] Using gulpfile C:AppServwwwgulpgulpfile.js
[14:47:03] Starting 'hello'...
hello
[14:47:03] Finished 'hello' after 147 μs
_____________________________________________________________________________


4.创建默认任务
gulp.task('default', ['hello']);
默认任务会自动执行，然后第二个参数代表要执行的子任务。
在cmd上直接输入gulp，则输出 ：
C:AppServwwwgulp>gulp
[14:53:59] Using gulpfile C:AppServwwwgulpgulpfile.js
[14:53:59] Starting 'hello'...
hello
[14:53:59] Finished 'hello' after 161 μs
[14:53:59] Starting 'default'...
[14:53:59] Finished 'default' after 13 μs
___________________________________________________________________________


5.复制一个文件到其它地方
src 指定要处理的文件目录
pipe 可以理解为管道
dest 输出的位置
例子：
var gulp = require('gulp');
gulp.task('copy', function(){
return gulp.src('index.html').pipe(gulp.dest('dist'));
});
cmd下输入 gulp copy
则会在项目下生成一个dist的文件夹，该文件夹下会有一个index.html的文件
___________________________________________________________________________


6.复制图片到其它地方
复制图片和复制文件差不多。例子 ：
gulp.task('copy-image', function(){
return gulp.src('images/*.jpg').pipe(gulp.dest('dist/images'));
});
images/*.jpg   代表images文件夹下的jpg图片（不包括子目录）
images/*.{jpg,png} 代表images文件夹下的jpg和png图片（不包括子目录）
images/**/ 代表images下所有的图片（包括子目录）
___________________________________________________________________________


7.复制多个文件到其它目录
gulp.task('copy-all', function(){
return gulp.src(['xml/**/', 'images/**/']).pipe(gulp.dest('dist/data'));
});
src下，使用[xx,xx]可一次性复制多个不同格式的文件
___________________________________________________________________________


8.排除不想复制的文件
gulp.task('copy-all', function(){
return gulp.src(['xml/**/', 'images/**/', '!xml/_*.xml']).pipe(gulp.dest('dist/data'));
});
!xml/_*.xml   代表排除掉xml文件夹下，以‘_’开头的xml文件
___________________________________________________________________________


9.合并任务
gulp.task('bulid', ['copy','copy-all'], function(){
console.log('finsh');
});
注意的是copy 和 copy-all任务会同时执行，执行完这两个任务后才会执行回调函数
___________________________________________________________________________


10.监听文件改变
使用watch可以监听某个文件，一旦改文件发生改变，则执行某个任务。
例子：
var gulp = require('gulp');
gulp.task('copy', function(){
return gulp.src('index.html').pipe(gulp.dest('dist'));
});
gulp.task('watch', function(){
gulp.watch('index.html', ['copy']);
});
运行后，watch任务会一直执行。要退出的话按ctrl+c
这里我们监听index.html， 当我们在index.html输入新的内容的时候，它会去执行copy任务
___________________________________________________________________________


11.gulp的扩展插件http://gulpjs.com/plugins/
___________________________________________________________________________


12.创建一个服务器
1）先安装npm install gulp-connect --save-dev
2）
var connect = require('gulp-connect');
gulp.task('server', function(){
connect.server({
root : 'dist'  //文件夹名
});
});
3)在浏览器输入http://localhost:8080/
___________________________________________________________________________


13.当html文件发生改变时，浏览器会自动刷新
var gulp = require('gulp');
var connect = require('gulp-connect');


gulp.task('watch', function(){
gulp.watch('index.html', function(){
return gulp.src('index.html').pipe(connect.reload());
});
});


gulp.task('server', function(){
connect.server({
root : './',
livereload : true//设置为true即可自动刷新浏览器
});
});


gulp.task('default',['server', 'watch']);
___________________________________________________________________________


14.合并两个文件
1）安装npm install gulp-concat --save-dev
2）
var gulp = require('gulp');
var concat = require('gulp-concat');


gulp.task('scripts', function(){
return gulp.src(['js/zepot.js', 'js/tab.js'])
 .pipe(concat('hebin.js'))//hebin.js指的是合并以后的名字
 .pipe(gulp.dest('dist/js'));
});
___________________________________________________________________________


15.压缩js文件
1）安装npm install gulp-uglify --save-dev
2）
var gulp = require('gulp');
var concats = require('gulp-concat');
var uglilfy = require('gulp-uglify');


gulp.task('scripts', function(){
return gulp.src(['js/zepot.js', 'js/tab.js'])
 .pipe(concats('hebin.js'))
 .pipe(uglilfy())//压缩代码
 .pipe(gulp.dest('dist/js'));
});
___________________________________________________________________________


16.压缩css文件
1)安装npm install gulp-minify-css --save-dev
2）
var gulp = require('gulp');
var minifyCSS = require('gulp-minify-css');


gulp.task('mincss', function(){
return gulp.src('css/*.css').pipe(minifyCSS()).pipe(gulp.dest('dist/css'));
});
___________________________________________________________________________


17.压缩图片
1）安装npm install gulp-imagemin --save-dev
2）
var gulp = require('gulp');
var imagemin = require('gulp-imagemin');


gulp.task('images', function(){
return gulp.src('img/**/')
.pipe(imagemin())
.pipe(gulp.dest('dist/img'));

});

更新npm ：npm install -g npm