gulp的安装和使用

作者: 方豆儿 | 来源:发表于2017-10-20 14:27 被阅读0次

gulp的简单使用
Gulp 使用方法(教程一)
gulp入门
自动任务管理工具 -- gulp
angular1配合gulp和bower使用
gulp安装和使用
html代码复用各种方法
gulp的安装和使用
使用Potree进行点云可视化
gulp less

一、什么是gulp

一个前端构建工具，通过脚本实现文件、图片的压缩等功能。功能的实现依赖于插件，所以想要实现什么功能，必须先安装对应的插件

二、gulp的安装、使用

1.首先安装node环境

①全局安装gulp:首先后台输入cmd命令，输入npm install -g gulp

②在要使用gulp的项目中单独安装一次gulp（方便单独操作各个项目），同时安装所需要的插件，安装gulp输入npm install gulp gulp-uglify

安装插件：

js文件压缩插件 npm install --save-dev gulp-uglify

css文件压缩插件npm install --save-dev gulp-minify-css 

重命名插件 npm install --save-dev gulp-rename

js代码语法检查 npm install --save-dev gulp-jshint

文件合并 npm install --save-dev gulp-concat

less编译 npm install --save-dev gulp-less

图片压缩 npm install --save-dev gulp-imagemin(这个插件可以用来压缩PNG, JPEG, GIF和SVG图片)

        npm install --save-dev  gulp-smushit(只能处理JPG和PNG)

2.在项目根目录下创建gulpfile.js文件，在文件中定义需要完成的任务

js文件压缩使用示例

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

css文件压缩使用示例

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

文件重命名使用示例

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
});

使用gulp-imagemin压缩图片

var gulp = require('gulp');
var imagemin = require('gulp-imagemin'),
    pngquant = require('imagemin-pngquant');
gulp.task('imagemin', function () {
    return gulp.src('src/*')
        .pipe(imagemin({
            progressive: true,
            use: [pngquant()]
        }))
        .pipe(gulp.dest('imagemin-dist'));
});

使用gulp-smushit压缩图片

var gulp = require('gulp');
var smushit = require('gulp-smushit');
gulp.task('smushit', function () {
    return gulp.src('src/*')
        .pipe(smushit({
            verbose: true
        }))
        .pipe(gulp.dest('smushit-dist'));
});

js代码语法检查使用示例

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

文件合并使用示例

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编译使用示例

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