gulpjs安装和用法

一、gulp安装

1.安装nodejs

2.全局方式安装gulp  

npm install -g gulp

3.创建package.json

npm init

4.在项目中单独安装，目录切换到项目文件夹（文件夹shift+鼠标右键，打开命令窗口）

npm install gulp

把gulp写进项目package.json文件的依赖中，则可以加上--save-dev：npm install --save-dev gulp

二、gulp API介绍

四个常用API，gulp.task(),gulp.src(),gulp.dest(),gulp.watch()，很多文章介绍，在此不多说

三、安装常用插件

1、自动加载

npm install --save-dev gulp-load-plugins

2.重命名

npm install --save-dev gulp-rename

3.js文件压缩

npm install --save-dev gulp-uglify

4.css文件压缩

npm install --save-dev gulp-minify-css

5.html文件压缩

npm install --save-dev gulp-minify-html

6.js代码检查

npm install --save-dev gulp-jshint

7.文件合并

npm install --save-dev gulp-concat

8.less和sass的编译

npm install --save-dev gulp-less

npm install --save-dev gulp-sass

9.图片压缩

npm install --save-dev gulp-imagemin

npm install --save-dev imagemin-pngquant   //pgn压缩

10.自动刷新

npm install --save-dev gulp-livereload

四、gulpfile.js

// 引入 gulp
var gulp = require('gulp');


// 引入组件
var plugins = require('gulp-load-plugins');//自动加载
var rename = require('gulp-rename');//重命名
var uglify = require("gulp-uglify");//文件压缩
var minifyCss = require("gulp-minify-css");//css文件压缩
var minifyHtml = require("gulp-minify-html");//html文件压缩
var jshint = require("gulp-jshint");//js代码检查
var concat = require("gulp-concat");//文件合并
var less = require("gulp-less");//less编译
var sass = require("gulp-sass");//sass编译
var imagemin = require('gulp-imagemin');//图片压缩
var pngquant = require('imagemin-pngquant'); //png图片压缩插件
var livereload = require('gulp-livereload');//自动刷新


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.task('minify-js', function () {
    gulp.src('js/*.js') // 要压缩的js文件
    .pipe(uglify())  //使用uglify进行压缩,更多配置请参考：
    .pipe(gulp.dest('dist/js')); //压缩后的路径
});

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

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

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

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

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

gulp.task('compile-sass', function () {
    gulp.src('sass/*.sass')
    .pipe(sass())
    .pipe(gulp.dest('dist/css'));
});

gulp.task('imagemin', function () {
    return gulp.src('img/*')
        .pipe(imagemin({
            progressive: true,
            use: [pngquant()] //使用pngquant来压缩png图片
        }))
        .pipe(gulp.dest('dist/img'));
});

五、运行gulpfile.js任务

然后在命令行中执行gulp命令就行了，gulp后面可以加上要执行的任务名，例如gulp task1，如果没有指定任务名，则会执行任务名为default的默认任务。

六、对js/css进行md5加密

为了防止客户端的静态资源缓存，我们需要每次更新css或js的时候，通过md5或时间戳等方式重新命名静态资源。让客户端可以重新请求资源，而不是从缓存里取。然后html模板里的src也要做相应的修改。当然，这里还有个附加的需要就是，静态资源需要自行优化（压缩合并）。

1.安装插件

npm install --save-dev gulp-rev gulp-rev-collector

2.gulpfile.js

var gulp = require('gulp'),                        //基础库
    clean = require('gulp-clean'),                 //清空文件夹
    minify = require('gulp-minify-css'),           //css压缩
    rename = require('gulp-rename'),               //文件重命名
    rev = require('gulp-rev'),                     //更改版本名
    collector = require('gulp-rev-collector'),     //gulp-rev的插件，用于html文件更改引用路径
    concat = require('gulp-concat'),               //合并多个文件
    notify = require('gulp-notify');               //提示
　　　　
gulp.task('clean',function(){　　　　　　　　　　　　  
    return gulp.src('build',{ read : false})       //src的第二个参数的{read:false}，是不读取文件,加快程序。
        .pipe(clean());
})
gulp.task('index',['clean'],function(){
    return gulp.src('app/index.min.html')
        .pipe(rename(function(path){
            path.basename ='index';
            path.extname = ".html";
        }))
        .pipe(gulp.dest('build'))
})

gulp.task('css',['index'],function(cb){
    return gulp.src('app/**/*.css')
        .pipe(minify())
        .pipe(concat('main.css'))
        .pipe(rename(function(path){
            path.basename +='.min';
            path.extname = ".css";
        }))
        .pipe(rev())
        .pipe(gulp.dest('build/css'))
        .pipe(rev.manifest())
        .pipe(gulp.dest('build/rev'));
    cb();
})

gulp.task('rev',['css'],function(){
    return gulp.src(['build/rev/rev-manifest.json','build/index.html'])
        .pipe(collector({
            replaceReved : true
        }))
        .pipe(gulp.dest('build/'))
        .pipe(notify("success!!!"))
})