gulp的基本使用

gulp是什么

gulp是一个前端构建工具，通过脚本实现文件图片的压缩，gulp功能的实现依赖于插件，所以想使用什么功能，得先安装对应的插件

gulp的安装、使用

1.安装node环境
2.全局安装gulp： <b> 以下的斜体表示在cmd的命令</b><i>npm install -g gulp</i>
3.在需要使用gulp的项目中单独安装一次gulp（方便单独操作各个项目），同时安装所需要的插件 <i>npm install gulp gulp-uglify</i> 这里是以安装插件gulp-uglify为例
4.在项目根目录下创建gulpfile.js文件，在文件中定义需要完成的任务

var gulp = require('gulp'),
    uglify = require('gulp-uglify');
gulp.task('default', function(){
    gulp.src('main.js')
    .pipe(uglify())
    .pipe(gulp.dest('dist/'));
});

5.切换到gulpfile.js所在的文件下，运行gulp任务。 <i>gulp</i>，注：如果gulp命令后没有加任务名，则执行默认任务，如果添加了任务名则 执行指定的任务。

gulp的常用方法

• gulp.src(path):指定要操作的文件（以流的形式读取出来）。
• 参数是要读取文件的路径
• 如果要匹配多个文件路径，可以使用数组结构。
• gulp.task(name,function)：
• name：任务名，如果没有指定任务名，默认是default。
• function：任务所对应的实现函数。
  注：如果需要按某个顺序执行多个任务，可以在中间插入第二个参数：依赖任务

gulp.task('default',['one','two','three']);//只要执行default任务，就相当于把one，two，three这三个任务执行了

• gulp.dest(path)：把文件流写入到指定位置
• 参数是要写入的路径（文件名是读取时的名字），如果需要修改写入的文件名，则需要使用插件修改：gulp-rename

gulp的常用插件

• js文件压缩插件
• 安装方法：<i>npm install --save-dev gulp-uglify</i>
• 使用示例:

var gulp = require('gulp'),
       uglify = require("gulp-uglify");
gulp.task('minify-js', function () {
        gulp.src('js/*.js') // 要压缩的js⽂文件
        .pipe(uglify()) 
        .pipe(gulp.dest('dist/js')); //压缩后的路路径
});

• 重命名插件
• 安装方法：<i>npm install --save-dev gulp-rename</i>
• 使用示例:

var gulp = require('gulp'),
    rename = require('gulp-rename'),
    uglify = require("gulp-uglify");
gulp.task('rename', function () {
     gulp.src('js/jquery.js')
     .pipe(uglify()) //压缩
     .pipe(rename('jquery.min.js')) //会将jquery.js重命名为jquery.min.js
    .pipe(gulp.dest('js'));
//关于gulp-rename的更更多强⼤大的⽤用法请参考https://www.npmjs.com/package/gulp-rename
});

• CSS文件压缩插件
• 安装方法：<i>npm install --save-dev gulp-minify-css</i>
• 使用示例:

var gulp = require('gulp'),
    minifyCss = require("gulp-minify-
css");
gulp.task('minify-css', function () {
    gulp.src('css/*.css') // 要压缩的css⽂文件
    .pipe(minifyCss()) //压缩css
    .pipe(gulp.dest('dist/css'));
});

• JS 代码语法检查插件
• 安装方法：<i>npm install --save-dev gulp-jshint</i>
• 使用示例:

var gulp = require('gulp'),
    jshint = require("gulp-jshint");
gulp.task('jsLint', function () {
    gulp.src('js/*.js')
    .pipe(jshint())
    .pipe(jshint.reporter()); // 输出检查结果
});

• 文件合并插件
• 安装方法：<i>npm install --save-dev gulp-concat</i>
• 使用示例:

var gulp = require('gulp'),
    concat = require("gulp-concat");
gulp.task('concat', function () {
    gulp.src('js/*.js') //要合并的⽂文件
    .pipe(concat('all.js')) // 合并匹配到的js⽂文件并命名为 "all.js"
    .pipe(gulp.dest('dist/js'));
});

• less编译
• 安装方法：<i>npm install --save-dev gulp-less</i>
• 使用示例:

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