gulp

当前的前端·开发
-不再是简简单单的使用html+css+javascript这些简单的技术构建的技术构建网页应用程序了
-我们要提高效率，就必须减少重复的工作
-使用less之类预处理的css coffeescript
-提供开发阶段的便利，开发阶段更快捷
现在的开发行业优质的开发人员是不应该将精力放在这些重复性质的工作上
-gulp就是一种可以自动化完成我们开发过程中大量的重复工作
-预处理语言的编译
-js css html 压缩混淆
-图片体积化
除gulp之外还有一些类似的自动化工具，比如grunt
gulp简介
-当下最流行的自动化工具
什么是自动化构建工具？
自动完成一系列重复的操作
* less–css
* coffeescript 不能直接执行，转换js才能执行: javascript的简写
* css压缩
* js混淆
* html压缩
* img尺寸优化
gulp官网
gulp中文网
在线压缩工具
-gulp的机制就是原来机械化完成重复性的工作，将重复性工作抽象成任务

准备工作

gulp安装（npm install gulp –save-dev )
gulp的包既包含工具，又包含编程的api（一共就四个）
npm init 初始化 会看到package.json 文件，里面保存依赖
然后再安装你需要的
-如果官方数据源太慢你可以去淘宝npm安装

gulp任务编写

//此处node代码
//gulp机制  将重复性工作抽象成任务
//载入gulp模块
var gulp = require('gulp');
//注册一个任务
gulp.task('say',function()
{
    //当gulp执行这个say任务时会自动执行该函数,输出hello world
    //我们当然不会在控制台输出一些东西,我们一般会做合并  压缩  之类操作
    //console.log('hello world');
    //复制操作
    //gulp.src 取一个文件
    gulp.src('src/index.html')
    //此处可以连续写多个pipe,例如先压缩一下，再输出到指定文件夹里，这里我们只用到一个
        .pipe(gulp.dest('dist/'))
        //将此处需要的操作传递进去,把index.html复制到dist中去，不用写文件名，原来叫什么，现在也叫什么

//监视一个文件，发生变化时做一些操作，（减少每次在命令行中执行任务
        gulp.task('copy',function()
{


    //gulp.src 取一个文件
    gulp.src('src/index.html')

        .pipe(gulp.dest('dist/'));

    //不能直接在这写watch,死循环每次进来都会监视  
    //gulp.watch('src/index.html',['copy']);

    //以下为正确做法,这里任务只执行一次
    gulp.task('dist',function(){
    //src/index.html
    gulp.watch('src/index.html',['copy']);



});

安装好gulp后，到命令行中去执行这个say任务：
gulp say

使用gulp插件（grunt自动化工具是jquery和bootstrap用的多，国内fis3fis3文档

fis3官网中文文档百度开发的，挺强大）
1.命令行中安装这个插件
2.引入 var less= require(‘gulp-less’);//less—css
3.写一个任务：

gulp.task('style',function()
{
    gulp.src('src/styles*.less'){
    .pipe(less())
    .pipe(gulp.dest('dist/css/'));
    });

常用插件：
编译less:gulp-less用法
创建本地服务器 : gulp-connect：通过gulp命令启动一个http服务器，browsersync有相同的功能，比gulp-connect更强大
合并文件：gulp-concat
最小化js文件：gulp-uglify
重命名文件
最小化css文件
压缩html文件
gulp学习demo