前端自动化gulp使用方法

gulp介绍

1. 网站： http://slides.com/contra/gulp#/

2. 特点

　　易于使用：通过代码优于配置的策略， Gulp 让简单的任务简单，复杂的任务可管理。
　　构建快速 ：利用 Node.js 流的威力，你可以快速构建项目并减少频繁的 IO 操作。
　　插件高质 ： Gulp 严格的插件指南确保插件如你期望的那样简洁高质得工作。
　　易于学习 ：通过最少的 API ，掌握 Gulp 毫不费力，构建工作尽在掌握：如同一系列流管道。

 

1.gulp安装

　　前提先安装 nodejs 环境然后在进行如下安装

npm install gulp -g 全局安装

npm install gulp --save-dev  安装依赖

如果安装不成功，借助cnpm

2. 初始化工程

1>、mkdir  文件夹名称

2>cd 文件夹名称

3> 创建 package.json 文件

　　手动创建或者命令创建
　　npm init 输入相关信息

4> 然后发现没有 gulp

　　这个时候就需要输入
　　npm install gulp --save-dev
　　然后出现一个 node_modules/ 文件夹

　　(2) 有配置文件的话
　　直接输入 npm install 就可以了

3. 创建任务

　　通过 gulpfile.js 去创建任务
　　在根目录下创建一个 gulpfile.js 的文件
　　在文件中写入以下内容

　　　　var gulp = require('gulp');
　　　　gulp.task('hello',function(){
　　　　　　// 第一个参数是任务名称，第二个参数是任务功能
　　　　　　console.log('hello world!');
　　　　})

　　写完之后呢

　　在命令行中输入
　　gulp hello 命令执行输出 hello world ！

　　其他命令我们会在后面介绍
　　这里呢我们先介绍一个默认的任务

　　gulp.task('default',function(){}) 他也有回调函数，但是呢，但是回调函数，我们可以通过数组来定义
　　gulp.task('default',['hello',....]); 数组里放入我们定义的字符串

　　然后命令行中输入gulp     就可以执行了//例如上面输  gulp default

4.gulp 基础

 

　　gulp.src().pipe(gulp.dest())
　　gulp.src() 方法可以帮助我们找出将要处理的文件，然后 pipe() 去处理这些找到的文件。 pipe() 可以理解为管道，每个管道就可以指定它的功能，最后我们再使用 gulp.dest() 方法把处理好的文件放到指定的地方。

　　1>使用 gulp 来实现文件的 copy
首先在我们工程目录下新建一个测试使用的 index.html,然后写入相应的内容
在我们个 gulpfile.js 文件中输入以下内容

　　var gulp =require('gulp');
　　gulp.task('copy-index',function(){
　　　　//gulp.src() 找到我们的 index.html 然后使用 .pipe() 通道
　　　　//gulp.dist() 发布拷贝
　　　　return gulp.src('index.html').pipe(gulp.dist('dist'));
　　});

在我们的命令行中执行gulp copy-index 命令,然后去 dist 目录下验证

 

复制文件夹下所有jpg图片

 

　　var gulp = require('gulp');
　　　　gulp.task('images',function(){
　　　　return gulp.src('images/*.jpg').pipe(gulp.dest('dist/images'))
　　});

　　*.jpg 所有格式为jpg的图片

 

 

下面再讲一下如何拷贝 images 下面文件夹以及文件夹下文件加入我们想要同时拷贝 jpg ， png 文件

 

 

 

　　gulp.task('images',function(){
　　　　return gulp.src('images/*.{jpg,png}').pipe(gulp.dest('dist/images'))
　　})

 

　　里面不要加空格，/**/* 当前文件夹下所有文件以及子文件下所有文件

 

 

两个文件夹同时拷贝到某一个文件夹下

　　gulp.task('data',function(){
　　　　return gulp.src(['xml/*.xml','json/*.json']).pipe(gulp.dest('dist/data'));
　　})

　　排除文件拷贝

　　gulp.task('data',function(){
　　　　return gulp.src(['xml/*.xml','json/*.json' ， '!/json/secret.json']).pipe(gulp.dest('dist/data'));
　　})

　　!/json/secret.json 排除某个文件

多个任务执行，将上述几个一起执行

　　gulp.task('build',['copy-index','images','data'],function(){
　　　　console.log(' 编译成功 ');
　　})

　　命令行 gulp build 查看效果

2>侦测文件变化

　　gulp.task('watch',function(){
　　　　gulp.watch('index.html',['copy-index']);
　　　　gulp.watch('images/**/*.{jpg,png}',['images']);
　　　　gulp.watch(['xml/*.xml','json/*.json','!json/secret.json'],['data']);
　　})

　　回到命令行执行   gulp watch

　　结束  ctrl + C
　　回到文件里面改变文件看下效果

5、gulp 插件使用

　　访问网站 http://gulpjs.com/plugins

1>、gulp 编译 less
　　命令行安装依赖

npm install gulp-less --save-dev

　　创建 less 文件，写入内容

　　在 gulpfile.js 文件中写入

　　var less = require('gulp-less');
　　gulp.task('less',function(){
　　　　return gulp.src('stylesheet/**/*.less')
　　　　.pipe(less());
　　　　.pipe(gulp.dest('dist/css'));
　　})

2>、gulp-connect 插件搭建本地服务

　　命令行安装 

npm install gulp-connect --save-dev

　　在 gulpfile.js 文件中写入

　　var connect= require('gulp-connect');
　　　　gulp.task('sever',function(){
　　　　connect.server();
　　})

　　启动服务：

　　命令行执行 gulp sever

修改文件后页面自动刷新

gulp.task('sever',function(){
    //connect.server();
    //sever() 方法介绍
    // 配置文档根目录
    connect.server({
        root ： 'dist' ，
        livereload:true
    });
})            

然后在我们 copy 任务中添加

gulp.task('copy',function(){
    return gulp.src('index.html').pipe(gulp.dest(''))
        .pipe(connect.reload());
})    

然后在 watch 中添加

gulp.task('watch',function(){
    gulp.watch('index.html',['copy']);
})

然后创建一个

gulp.task('default',['server','watch']);

最后执行  gulp default 命令

验证修改文件看下浏览器中是否会自动刷新

3>、合并文件插件 gulp-concat

　　命令行安装   npm install gulp-concat --save-dev

在 gulpfile.js

var concat = require('gulp-concat');
gulp.task('scripts',function(){
    return gulp.src(['javascripts/avalon.js','javascripts/index.js'])
        .pipe(concat('vendor.js'))
        .pipe(gulp.dest('dist/js'));
})        

4>、将合并 js 文件进行压缩 gulp-uglify

命令行安装   npm install gulp-uglify --save-dev

    var uglify = require('gulp-uglify');
    gulp.task('scripts',function(){
    return gulp.src(['javascripts/avalon.js','javascripts/index.js'])
        .pipe(concat('vendor.js'))
        .pipe(uglify())//
        .pipe(gulp.dest('dist/js'));
    })    

为了保留前后压缩两个文件
怎么做呢
安装 gulp-rename 插件

命令行安装   npm install gulp-rename --save-dev

    var rename = require('gulp-rename');
    gulp.task('scripts',function(){
        return gulp.src(['javascripts/avalon.js','javascripts/index.js'])
            .pipe(concat('vendor.js'))
            .pipe(gulp.dest('dist/js'))
            .pipe(uglify())
            .pipe(rename('vendor.min.js'))
            .pipe(gulp.dest('dist/js'));
    })                

命令行执行    gulp scripts
验证是否生成两个文件

5>、如何压缩 css

命令行安装  npm install gulp-minify-css --save-dev

    var minifyCss = require('gulp-minify-css');
    gulp.task('less',function(){
        return gulp.src('stylesheet/**/*.less')
            .pipe(less());
            .pipe(minifyCss())
            .pipe(uglify())
            .pipe(gulp.dest('dist/css'));
    })

6>、对图片进行压缩

安装插件 npm install gulp-imagemin --save-dev

    var imagemin = require('gulp-imagemin');
    gulp.task('images',function(){
        return gulp.src('images/**/*')
            .pipe(imagemin())
            .pipe(gulp.dest('dist/images'))
    })

执行命令   gulp images

6>、监听文件，浏览器自动刷新

　　安装插件 npm install gulp-livereload --save-dev

var less = require("gulp-less"); //less编译
var livereload = require('gulp-livereload'); //自动刷新

gulp.task('compile-less', function() {
    gulp.src('style/less/*.less') //less编译
        .pipe(less())
        .pipe(gulp.dest('style/css'))
        .pipe(livereload());

});
gulp.task('watch', function() {
    livereload.listen(); //要在这里调用listen()方法
    gulp.watch('style/less/*.less', ['compile-less']); //监听目录下的文件，若文件发生变化，则调用less任务。
    gulp.src('index.html')
        .pipe(livereload());
});
//当代码变化时，它可以帮助我们自动刷新页面，该插件最好配合谷歌浏览器，且要安装livereload chrome extension扩展插件，否则无效。

 

 

gulp 功能呢暂时讲到这里还有很多内容可以参考官网进行学习

 更详细gulp入门地址 http://www.ydcss.com/archives/18