gulp工具实战使用示例

1.安装node.js

2.初始化这个项目

npm init
name:(text) 默认工程名
version:(1.0.0) 默认1.0.0
description: 项目描述选填
entry point:(gulpfile.js) 项目主要的js文件 选填 mian.js
test command: 测试的命令 选填
git repository: github仓库（默认关联的是自己项目的github仓库）
keywords: 关键字 选填
author: 作者 选填
license: 声明 选填
项目下会多一个package.json 文件
一路回车

3.安装gulp 打包工具，使用gulp 处理css,js,image

因为laravel提供了一个gulpfile.js文件，所以选择了gulp
sudo npm install --global gulp 安装成全局的gulp
sudo npm install --save-dev gulp 配置项目文件夹
查看gulp 版本
gulp -version
如果安装比较慢，更换为淘宝的镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org
随后就可以使用cnpm了；

4.gulp相关插件

安装gulp对应的重命名插件 cnpm install gulp-rename
安装gulp对应的合并文件插件 cnpm install gulp-concat
安装gulp对应的压缩css插件 cnpm install gulp-minify-css
安装gulp对应的压缩js插件 cnpm install gulp-uglify
安装gulp对应的压缩图片插件 cnpm install gulp-imagemin

5.开始使用gulp,在自己项目的gulpfile.js中编写一下内容

//引入下边的模块
var gulp = require('gulp');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var minifyCss = require('gulp-minify-css');
var rename = require('gulp-rename');
// var imagemin = require('gulp-imagemin');

// 合并 css 并压缩
gulp.task('package-css', function() { //package-css自定义的任务名字
return gulp.src(['public/css/weui.css', 'public/css/swipe.css', 'public/css/book.css']) //需要压缩的css文件
.pipe(concat('book.css')) //压缩后的文件名字
.pipe(minifyCss()) //使用的函数模块
.pipe(rename('book.min.css')) //重命名压缩后的文件名为压缩名字
.pipe(gulp.dest('public/build')); //压缩后的文件存放的目录
});

// 压缩 js
gulp.task('package-js', function() {
return gulp.src(['public/source/mt4_jquery.mousewheel.js', 'public/source/mt4_perfect_scrollbar.js'])
.pipe(concat('mt4.js'))
.pipe(uglify())
.pipe(rename('mt4.min.js'))
.pipe(gulp.dest('public/build'));
});

// 移动图片
gulp.task('package-images1', function() {
return gulp.src('images/*')
.pipe(gulp.dest('build/images'));
});

// 工作流启动
gulp.task('default', ['package-css', 'package-js'], function() {
// 将你的默认的任务代码放在这

});

gulp.task('css', ['package-css'], function() {
// 将你的默认的任务代码放在这

});

gulp.task('js', ['package-js'], function() {
// 将你的默认的任务代码放在这

});

6.开始执行压缩任务

gulp default | gulp 默认执行default包含的任务
gulp css 执行指定的任务