gulp的介绍及gulpfile.js的配置

gulp是自动化的构建工具，处理的常见任务：（4个）

搭建web服务器；优化资源；文件保存时自动重载；适用于处理器；

 

//gulp创建项目

 

• mkdir projet;
• cd project;//进入这个项目
• npm init;//自动为你创建package.json文件（储存项目的相关信息）
• npm install gulp --save-dev//局部安装gulp，完成这几步后自动生成node_module文件

gulp有4个属性：src,task,dest,watch

   1)gulp.task("task-name",function(){})->调用gulp task-name  //创建一个任务

     gulp.task("task-name",[,],function(){})->gulp task-name

   2)gulp.src()->获取要处理的文件源路径//！移除文件，*任意，.+(scss|sass)匹配.sass和.scss文件

   3).pipe(gulp.dest('./dist/css'))

    gulp.dest()->作用是将目的地址的基础路径替换成源地址的路径输出

    替换-》gulp.src('./src/css/*.css').pipe().pipe(gulp.dest('./dist/css'))；

          ./dist/css/*.css

   4).pipe管道函数，办一个文件流入，通过pipe管道输出

 

   5）.gulp.watch()->监视文件，就是监视文件的变化，然后运行指定的Tasks或者函数，这个相比Grunt需要使用插件，gulp本身就支持的很好。

 

自动刷新：

browser sync

Browsersync能让浏览器实时、快速响应您的文件更改（html、js、css、sass、less等）并自动刷新页面。更重要的是 Browsersync可以同时在PC、平板、手机等设备下进项调试。

npm install browser-sync --save-dev  //安装browser sync

var gulp        = require('gulp');
var browserSync = require('browser-sync').create();

// 静态服务器
gulp.task('browser-sync', function() {
    browserSync.init({
        server: {
            baseDir: "./"
        }
    });
});

// 代理

gulp.task('browser-sync', function() {
    browserSync.init({
        proxy: "你的域名或IP"
    });
});

通过流的方式创建任务流程, 这样就可以在你的任务完成后调用reload，所有的浏览器将被告知的变化并实时更新. 因为Browsersync只在乎你的CSS在编译完成 finished 后 - 注意： gulp.dest后调用重载。

 

livereload为自动刷新插件

gulp.task('watch',function(){
  return gulp.watch('index.html',['copy-index']).pipe(connect.reload());//index.html发生变化后执行copy-index任务
  //.pipe(connect.reload()是为了配合实时刷新
});
//创建本地服务器运行代码
// npm install gulp-connect --save-dev livereload为自动刷新插件
var connect = require('gulp-connect'); // gulp-connect是开源的，它是一个静态web的服务
gulp.task('server',function(){
  connect.server({
    root : 'dist',
    port: 8080,
    livereload : ture  //启用实时刷新
  })
}); 

其中root是服务启动的根目录，换句话说别人通过IP+Port端口访问到你的服务器所访问到文件夹就是root（这里是'dist'），port就是端口了，livereload是一个标志，为true时gulp会自动检测文件的变化然后自动进行源码构建

在根目录启动命令行，输入gulp server将启动server。 

 

 

gulp-useref会将多个文件变成单一文件，并输出到相应目录->npm install gulp-useref

gulp-concat 合并两个js文件

gulp-rename 重命名文件

gulp-uglify压缩js文件->npm install gulp-uglify

gulp-minify-css压缩css-> npm install gulp-if gulp-minify-css --save-dev

gulp-imagemin优化图片->npm install gulp-imagemin --save-dev

其中一部分配置：

var gulp = require('gulp');//告知node去node_modules中查找gulp包，找到后就会赋值给gulp变量
var app={  
    srcPath:'src/',  //开发目录
     devPath:'build/', //生产目录
     prdPath:'dist/'//发布目录（用于发布）
};

gulp.task('image',function(){  //为事件命名
  return gulp.src('images/**/*').pipe(gulp.dest('dist/images'));
  // gulp.src(['xml/*.xml','json/*.json']).pipe(gulp.dest('dist/data'));
  //同时操作xml下所有的.xml和json文件夹下所有的.json文件
  // gulp.src(['xml/*.xml','json/*.json','!json/secret-*.json']).pipe(gulp.dest('dist/data'));
  //叹号表示复制是忽略此类文件，即以secret-开头的所有文件
});//将images下的所有东西都复制到dist文件下的images里

//创建任务依赖三个任务
gulp.task('build',['copy-index','images','data'],function(){
  console.log('编译成功');
});
//执行build时会先执行后三个任务，执行完成后再执行build本身的任务

gulp.task('watch',function(){
  return gulp.watch('index.html',['copy-index']).pipe(connect.reload());//index.html发生变化后执行copy-index任务
  //.pipe(connect.reload()是为了配合实时刷新
});

//使用插件  npm install gulp-sass --save-dev ，less同理
var sass = require('gulp-sass');
gulp.task('sass',function(){
  return gulp.src('stylesheets/**/*.scss').pipe(sass()).pipe(gulp.dest('dist/css'));
  //将sass编译成css文件
});

//创建本地服务器运行代码
// npm install gulp-connect --save-dev livereload为自动刷新插件
var connect = require('gulp-connect'); // gulp-connect是开源的，它是一个静态web的服务
gulp.task('server',function(){
  connect.server({
    root : 'dist',
    port: 8000,
    livereload : ture  //启用实时刷新
  })
});