前端自动化工具--gulp

之前说过一个工具是grunt,现在说一说gulp

gulp也是前端自动化的一款工具

官网：http://www.gulpjs.com

注意只有logo是大写的，其他一切都是小写

安装

npm install gulp -g

检测是否安装成功

gulp --version

安装到本地项目

npm install gulp

使用

gulp的用法非常贴切于nodejs,在写任务的时候需要先在项目根目录创建一个gulpfile.js

插件：http://www.gulpjs.com/plugins

具体任务：

压缩js插件：gulp-uglify   

1. 引入插件  
   var gulp=require('gulp');  
   var uglify=require('gulp-uglify');

   2. 编写任务：  
        gulp.task(任务名,fnCb);  
        gulp.task('ys',function(){  
            //源地址 -> 处理 -> 输出  
            gulp.src()
           .pipe(uglify())
           .pipe(gulp.dest('dest'))
        }); 

    3. 运行
        gulp ys 

    4. 默认任务
        gulp.task('default',[任务名]);

var gulp=require('gulp');
var uglify=require('gulp-uglify');

//配置任务
gulp.task('uglify',function(){
    //具体任务流程
    gulp.src('src/js/index.js')
        .pipe(uglify())
        .pipe(gulp.dest('dest'))
});

//默认任务
gulp.task('default',['uglify']);

压缩css 插件 gulp-uglifycss   ||  gulp-cssmin

var gulp=require('gulp'),
    uglify=require('gulp-uglify'),
    ugliCss=require('gulp-uglifycss'),
    cssmin=require('gulp-cssmin');

//配置任务
gulp.task('css',function(){
    //具体任务流程
    gulp.src('src/css/a.css')
        .pipe(cssmin())
        .pipe(gulp.dest('dest'));
});

//默认任务
gulp.task('default',['css']);

压缩图片插件  gulp-imagemin

var gulp=require('gulp'),
    uglify=require('gulp-uglify'),
    ugliCss=require('gulp-uglifycss'),
    cssmin=require('gulp-cssmin'),
    imagemin=require('gulp-imagemin');

//配置任务
gulp.task('imagemin',function(){
    //具体任务流程
    gulp.src('src/image/*')
        .pipe(imagemin())
        .pipe(gulp.dest('dest/image'));
});

//默认任务
gulp.task('default',['imagemin']);

重命名插件 gulp-rename

var gulp=require('gulp'),
    uglify=require('gulp-uglify'),
    ugliCss=require('gulp-uglifycss'),
    cssmin=require('gulp-cssmin'),
    imagemin=require('gulp-imagemin'),
    rename=require('gulp-rename');

//配置任务
gulp.task('uglify:js',function(){
    //具体任务流程
    gulp.src('src/js/*')
        .pipe(uglify())
        .pipe(rename({
            suffix:'.min'
        }))
        .pipe(gulp.dest('dest/js'));
});

//默认任务
gulp.task('default',['uglify:js']);

文件合并插件 gulp-concat

var gulp=require('gulp'),
    uglify=require('gulp-uglify'),
    ugliCss=require('gulp-uglifycss'),
    cssmin=require('gulp-cssmin'),
    imagemin=require('gulp-imagemin'),
    rename=require('gulp-rename'),
    concat=require('gulp-concat');

//配置任务
gulp.task('concat:css',function(){
    //具体任务流程
    gulp.src('src/css/*')
        .pipe(concat('main.css'))
        .pipe(gulp.dest('dest/css'));
});

//默认任务
gulp.task('default',['concat:css']);

监听插件gulp-watch

var gulp=require('gulp'),
    uglify=require('gulp-uglify'),
    ugliCss=require('gulp-uglifycss'),
    cssmin=require('gulp-cssmin'),
    imagemin=require('gulp-imagemin'),
    rename=require('gulp-rename'),
    concat=require('gulp-concat'),
    watch=require('gulp-watch');

//配置任务
gulp.task('watch:css',function(){
    gulp.src('src/css/*.css')
        .pipe(watch('src/css/*.css'))
        .pipe(ugliCss())
        .pipe(rename({
            suffix:'.min'
        }))
        .pipe(gulp.dest('dest/css'));
});

//默认任务
gulp.task('default',['watch:css']);

补充说明

工程文件：
    npm init  初始化一个工程文件
    一路回车

npm install gulp --save-dev
npm install gulp-cssmin --save-dev
npm install gulp-uglify --save-dev
npm install gulp-rename --save-dev
npm install gulp-watch --save-dev

下面是一个整体用法

var gulp = require('gulp'),
	jshint = require("gulp-jshint"),
	uglify=require('gulp-uglify'),
	minifyCss = require("gulp-minify-css"),
	minifyHtml = require("gulp-minify-html"),
	imagemin = require('gulp-imagemin'),
	less = require('gulp-less'),
        livereload = require('gulp-livereload'),
	pngquant = require('imagemin-pngquant'), //png图片压缩插件
	connect = require('gulp-connect');

//js代码检查
gulp.task('jsLint', function () {
    gulp.src('js/*.js')
    .pipe(jshint())
    .pipe(jshint.reporter()); // 输出检查结果
});
	
//压缩js
gulp.task('ysjs',function(){
	gulp.src('js/*.js')  // 要压缩的js文件
	.pipe(uglify())      //使用uglify进行压缩,更多配置请参考：
	.pipe(gulp.dest('dist/js'));  //压缩后的路径
});

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

//html文件压缩
gulp.task('minify-html', function () {
    gulp.src('html/*.html') // 要压缩的html文件
    .pipe(minifyHtml()) //压缩
    .pipe(gulp.dest('dist/html'));
});
//图片压缩

gulp.task('tupian', function () {
    return gulp.src('images/*')
        .pipe(imagemin({
            progressive: true,
            use: [pngquant()] //使用pngquant来压缩png图片
        }))
        .pipe(gulp.dest('dist/images'));
});
//自动刷新
gulp.task('less', function() {
  gulp.src('less/*.less')
    .pipe(less())
    .pipe(gulp.dest('css'))
    .pipe(livereload());
});
//监听
gulp.task('watch', function() {
 // livereload.listen(); //要在这里调用listen()方法
  //gulp.watch('js/*.js', ['jsLint']);
  gulp.watch('js/*.js', ['ysjs']);
  gulp.watch('css/*.css', ['minify-css']);
   gulp.watch('html/*.html', ['minify-html']);
});

//默认任务
gulp.task('default',['ysjs','minify-html','minify-css','watch'],function(){
    console.log('恭喜你，压缩成功了！');
});