gulp使用分享

gulpjs使用分享

---

    gulpjs是一个前端构建工具，与gruntjs相比，gulpjs无需写一大堆繁杂的配置参数，API也非常简单，学习起来很容易，而且gulpjs使用的是nodejs中stream来读取和操作数据，其速度更快。如果你还没有使用过前端构建工具，那就尝试一下gulp吧。

gulp可以用来干什么

    首先来了解一下，gulp可以搭建一个web服务器，当html，js，css等文件发生改变时，gulp会把他们加入到流中，使页面进行刷新，如果你有两个显示器，一个用来写代码，写完保存的时候，另外一个显示器会直接显示你修改之后的代码，不用再切换一下浏览器点击F5来进行刷新。
    也可以用来压缩代码，添加版本号等你想要做的。

gulp流为何流

    gulp是基于流进行操作的，整个插件都是通过pipe()函数来赋予。gulp插件每次读取和返回都是一个object mode流，使用gulp.src()读取文件时，就会转换成viny File的格式。插件读入viny File objects，然后在输出viny File objects。一般我们叫它transform stream。

gulp安装

1.全局安装gulp

$ npm install --global gulp

2.作为项目的开发依赖（devDependencies）安装

$ npm install --save-dev gulp

开始使用gulp使用

1.建立gulpfile.js文件

var gulp = require('gulp');
gulp.task('default',function(){
    console.log('hello world');
});

2.此时我们的结构是这样的

├── gulpfile.js
├── node_modules
│ └── gulp
└── package.json

3.我们可以根据自己的需求来改变一下结构，下面是我的结构

├── gulpfile.js
├── newshop
│ └── html
│ └── js
│ └── images
│ └── css
│ └── less
├── node_modules
│ └── gulp
└── package.json

4.我们可以在gulpfile.js中编写一下最常用的工具

var gulp = require('gulp');
var changed = require('gulp-changed'); //监视文件是否有改变
var browserSync = require("browser-sync").create(); //静态服务器启动 
var reload      = browserSync.reload;  // 控制刷新时机
var less = require("gulp-less") ; // 编译less
var autoprefixer = require("gulp-autoprefixer");
// 配置静态服务器 PC
gulp.task('default', function() {
    browserSync.init({
        files: "/newshop/**/*.*", //监听整个项目
        browser: ["C:\\Program Files(x86)\\Google\\Chrome\\Application\\chrome.exe"],//浏览器位置
        server: {
            baseDir: "./",
            index: 'newshop/html/zwymall.html'//项目每次打开时进入的主页
        },
        port:4009//开启的端口
    });
    //监听
    gulp.watch('./newshop/html/*.html').on("change",reload) ;//监听html文件夹下面的html文件，有更新时刷新页面
    gulp.watch('./newshop/less/*.less',['pcLess']);//监听less文件夹下面的less文件，有更新时执行‘pcless’方法，下文中会列出这个方法
    gulp.watch('./newshop/css/*.css').on("change",reload) ;//监听css文件夹下面的css文件，有更新时刷新页面
    gulp.watch('./newshop/images/**/*.{jpg,png}').on("change",reload); //监听images文件夹下面的图片文件，有更新时刷新页面  
    gulp.watch('./newshop/js/*.js').on("change",reload) ;//监听js文件夹下面的js文件，有更新时刷新页面  
});

//这里面会用到把less编译为css的方法，需要单独编写

//编译less
gulp.task("pcLess",function(){
    return  gulp.src("./newshop/css/*.less")//less文件位置
        .pipe(less())//执行less方法
        .pipe(autoprefixer('last 5 version'))//将less编写成css
        .pipe(gulp.dest("./newshop/css"))//生成到css文件夹下面
        .pipe(reload({stream:true}));
});

这个是最简单的gulp使用，其中包括了使浏览器刷新，和编译less，以后会继续更新，希望可以带给大家方便。