gulp是什么？
gulp是工具链、构建工具，可以配合各种插件做js压缩，css压缩，less编译 替代手工实现自动化工作。
1.构建工具
2.自动化
3.提高效率用
基于流（streaming）的方式构建，首先读取文件，编译压缩文件（流的方式），最终将结果生成到配置的文件目录下。
初步使用 （先简单压缩CSS,JS体验一下）
环境配置
1.首先,安装nodejs.去官网,download.根据自己的系统版本下载安装.
安装好node以后，自带安装好npm。推荐使用cnpm，速度快一点。
2.我们接下来的步骤需要使用命令行,推荐使用git bash。
在你要运行gulp的文件夹目录里，右键，使用git bash，开始敲命令。
git bash here.png
先敲个node -v 和npm -v 检测一下安装好了没有。
如果出现版本号就是对的。
看一下版本号.png
因为使用的git bash,所以在哪里右键的就会在哪个菜单定位。如果是使用windows自带命令行的话，需要使用cd命令进入菜单，查看文件目录需要使用dir。
3.接下来全局安装gulp
cnpm install -g gulp
需要管理员权限，我是win10系统，右键开始菜单以管理员身份运行命令行，执行该命令。后面如果安装什么插件的时候提醒需要管理员权限，也是以同样的方式。
接下来进入项目文件，将gulp安装到开发环境。
执行cnpm install --save-dev gulp
我们使用-save-dev来更新package.json文件，更新devDependencies值，以表明项目需要依赖gulp。
4.新建gulpfile文件
在项目的根目录新建gulpfile.js文件。待会写入内容。
先介绍一下，gulp只有五个方法：
task(用来定义任务)
run(执行某任务，在后面定义default或者.watch监听任务变动时会用到)
watch(监听，当有文件变化时，会运行回调定义的其他任务)
src（用来定义要编译的源文件路径）
dest（定义编译完的文件输出路径）
5.安装插件。
gulp-minify-css: 压缩css
gulp-jshint: 检查js
gulp-uglify: 压缩js
gulp-concat: 合并文件
gulp-rename: 重命名文件
gulp-clean: 清空文件夹
gulp-notify:提示
安装gulp-jshint可能会遇到一些问题，需要先安装jshint。
cnpm install gulp-jshint gulp-sass gulp-concat gulp-uglify gulp-rename --save-dev
我的文件夹目录新建了一个assets用来存放编译过的文件，
stylesheets存放样式文件，javascripts存放js文件。
在gulpfile.js里写入：
// 引入 gulp及组件
var gulp=require('gulp'), //gulp基础库
minifycss=require('gulp-minify-css'), //css压缩
concat=require('gulp-concat'), //合并文件
uglify=require('gulp-uglify'), //js压缩
rename=require('gulp-rename'), //文件重命名
jshint=require('gulp-jshint'), //js检查
notify=require('gulp-notify'); //提示
//css处理
gulp.task('minifycss',function(){
return gulp.src('stylesheets/*.css') //设置css
.pipe(concat('order_query.css')) //合并css文件到"order_query"
.pipe(gulp.dest('assets/styles')) //设置输出路径
.pipe(rename({suffix:'.min'})) //修改文件名
.pipe(minifycss()) //压缩文件
.pipe(gulp.dest('assets/styles')) //输出文件目录
.pipe(notify({message:'css task ok'})); //提示成功
});
//JS处理
gulp.task('minifyjs',function(){
return gulp.src(['javascripts/*.js']) //选择合并的JS
.pipe(concat('order_query.js')) //合并js
.pipe(gulp.dest('assets/js')) //输出文件目录
.pipe(rename({suffix:'.min'})) //重命名
.pipe(uglify()) //压缩
.pipe(gulp.dest('assets/js')) //输出
.pipe(notify({message:"js task ok"})); //提示
});
gulp.task('default',function(){
gulp.start('minifycss','minifyjs');
});
运行，命令行里输入gulp
或者gulp 任务名可以单运行某一个任务，例如 gulp minifyjs 。
到这里初步可以看到压缩的成果啦。
如果想要更改了文件后自动监听到变化并重新编译，可以使用.watch（）方法。
定义default任务。这个任务是基于其他任务的。命令行只写一个gulp时，会自动运行default里的命令，可以用它将所有的任务关联起来，加入监听.watch，这样当文件出现修改变动时，将会自动重新编译。
注意一点坑的是：写文件路径，我一开始多写了一个斜杠，写成了'/stylesheets/*.less',于是就没有运行成功。改好后果然每次修改都会重新编译。
gulp.task('default', function(){
gulp.start('minifycss','minifyjs','testLess');
gulp.watch('stylesheets/*.less', function(){
gulp.start('testLess');
});
});
更新几个新的发现
gulp-changed
只对修改过的文件进行编译或者打包，没动过的直接输出(我遇到了问题，changed似乎不生效，每次修改后重新编译仍然会运行所有的文件）
var gulp = require('gulp');
var changed = require('gulp-changed');
var uglify = require('gulp-uglify');
gulp.task('changed',function(){
return gulp.src('./js/*.js') // 监视文件：js目录下所有的js文件
.pipe(changed('./dist')) // 过滤未修改文件,需要指定文件输出目录
.pipe(gulp.dest('./dist')); // 输出文件
});
gulp.task('compress',['changed'], function() {
return gulp.src('./js/*.js') // 压缩文件：js目录下所有的js文件
.pipe(plumer()) //异常处理
.pipe(uglify()) // 使用uglify插件执行压缩操作
.pipe(gulp.dest('./dist')); // 输出压缩后的文件
});
gulp-plumber
使用gulp watch 对文件进行热监控时，如果出现问题，会直接停止watch，还需要在控制台再次运行。
用gulp-pumber后出现异常会在控制台显示错误，但并不中断watch，当错误修改好后还可以继续执行watch。
npm install --save-dev gulp-plumber
gulp.task('compress',['changed'], function() {
return gulp.src('./js/*.js') // 压缩文件：js目录下所有的js文件
.pipe(plumer()) //异常处理
.pipe(uglify()) // 使用uglify插件执行压缩操作
.pipe(gulp.dest('./dist')); // 输出压缩后的文件
});
browersync
可以在pc、手机、pad上多端同时查看页面效果并且不用手动刷新！
炒鸡方便！
cnpm install -gd browser-sync
安装好后进入项目的根路径，输入
brower-sync start --server --files "**"
会启动一个小型的web应用服务器。--files "**"表示监视根路径下所有文件的修改情况，当文件被修改保存时，修改内容会实时同步到web浏览器中，控制台会显示url信息。
localhost：3000 默认地址
localhost：3001 访问设置页面
gulp也有插件.只是我这里装了gulp的插件后需要手动刷新
安装
npm install browser-sync gulp --save-dev
var browserSync = require('browser-sync').create();
gulp.task('browser-sync', function() {
browserSync.init({
server: {
baseDir: "./"
}
});
});
网友评论