gulp的初阶使用方法（转）

安装好gulp之后接下来就是使用了，此文主要介绍一些前端开发时常用的一些插件及其用法

http://www.imooc.com/article/tag/26/hot/12
插件安装

安装本地服务器插件：cnpm install gulp-connect --save-dev
安装合并文件插件：cnpm install gulp-concat --save-dev
安装压缩js文件插件：cnpm install gulp-uglify --save-dev
安装重命名插件：cnpm install gulp-rename --save-dev
安装压缩css文件插件：cnpm install gulp-minify-css --save-dev
优化图像文件的尺寸，在不改变图像质量的情况下，最小化图像大小：
cnpm install gulp-imagemin --save-dev

插件引入

在gulpfile.js的顶部引入

var gulp = require('gulp');//将gulp插件包含进来
var sass = require('gulp-sass'); //包含sass转换为css插件
var less = require('gulp-less'); //包含less转换为css插件
var connect = require('gulp-connect'); //包含服务器插件
var concat = require('gulp-concat');//合并文件
var uglify = require('gulp-uglify');//压缩js
var rename = require('gulp-rename');//重命名文件
var minifyCSS = require('gulp-minify-css');//压缩css
var imagemin = require('gulp-imagemin');//优化图片

插件用法

1.复制文件到指定文件夹

//复制文件到指定文件夹
gulp.task('copy-index',function(){
    return gulp.src('index.html')
        .pipe(gulp.dest('dist'))
        .pipe(connect.reload());
});

2.复制图片到指定文件夹

gulp.task('images',function(){
    return gulp.src('images/*.jpg')
        //.pipe(imagemin()) //未成功
        .pipe(gulp.dest('dist/images'));
        //images/**/* images目录下的所有子目录和所有东西(包含东西最多)
        //images/*/*  images目录下的东西和子目录下的东西
        //images/*.{png,jpg} images目录下的所有以png和jpg为后缀名的图片
});

3.多个数据文件复制(后面的目录可以不存在，不存在的话会自动创建)，在前面加叹号是排除这个（类）文件

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

4.创建依赖任务

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

5.创建监听任务

gulp.task('watch',function(){
//当文件发生变化时，自动执行相应的任务
    gulp.watch('index.html',['copy-index']);
    gulp.watch('images/**/*.{jpg,png}',['images']);
    gulp.watch(['xml/*.xml','json/*.json','!json/secre-*.json'],['data']);
});

6.将sass文件编译成css

gulp.task('sass',function(){
    return gulp.src('stylesheets/**/*.scss')
        .pipe(sass())  //上面定义的名字 var sass
        .pipe(gulp.dest('dist/css'));
});

7.将less文件编译成css

gulp.task('less',function(){
    return gulp.src('stylesheets/**/*.less')
        .pipe(less())  //上面定义的名字 var sass
        .pipe(minifyCSS())  //最小化css，去掉了注释和多余的空格
        .pipe(gulp.dest('dist/css'));
});

8.设置默认任务

//退出任务监听：Ctrl + C  然后  Y
//默认任务 gulp
gulp.task('default',['server','watch']);

9.合并js、压缩js、重命名压缩后的js

gulp.task('scripts',function(){
    return gulp.src(['javascripts/jquery.js','javascripts/index.js'])
        .pipe(concat('vendor.js'))  //合并js文件
        .pipe(gulp.dest('dist/js'))
        .pipe(uglify()) //最小化一下合并后的文件
        .pipe(rename('vendor.min.js')) //重命名压缩后的js文件
        .pipe(gulp.dest('dist/js'));
});

10.设置一个本地服务器

gulp.task('server',function(){
    connect.server({
        root:'dist',      //服务器的根目录
        livereload: true  //启用实时刷新的功能
    });
});

作者： 海岛心hey 
链接：http://www.imooc.com/article/8979
来源：慕课网
本文原创发布于慕课网 ，转载请注明出处，谢谢合作！