gulp

安装

sudo npm i gulp --save-dev
sudo npm i gulp -g

创建gulpfile.js配置文件

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

gulp.task('hello',function () {     //创建一个任务
    console.log('hello gulp!');
})

安装插件

npm i gulp-rev gulp-rev-replace gulp-useref gulp-filter gulp-uglify gulp-csso --save-dev

一个使用gulp的栗子

//gulpfile.js
var gulp = require('gulp');     //引入gulp
var rev = require('gulp-rev');     //给每个文件添加版本号
var revReplace = require('gulp-rev-replace');     //将index的引用改成新的文件名
var useref = require('gulp-useref');     //通过注释的方式去合并文件
var filter = require('gulp-filter');     //gulp作为一个流,它起到过滤作用,restore是再放回流中
var uglify = require('gulp-uglify');     //压缩js代码
var csso = require('gulp-csso');     //压缩css代码

//创建一个任务,如果任务名叫default,则不用加任务名直接执行default
gulp.task('default',function () {
    var jsFilter = filter('**/*.js',{restore:true});
    var cssFilter = filter('**/*.css',{restore:true});
    var indexHtmlFilter = filter(['**/*','!**/index.html'],{restore:true});

    return gulp.src('src/index.html')     //拿到要处理的文件
        .pipe(useref())     //拿到index文件中的JS,CSS文件
        .pipe(jsFilter)   //将JS文件筛选出来
        .pipe(uglify())     //压缩JS
        .pipe(jsFilter.restore)     //将压缩好的JS文件扔回流中
        .pipe(cssFilter)    //将CSS文件筛选出来
        .pipe(csso())       //压缩CSS
        .pipe(cssFilter.restore)    //将压缩好的CSS文件扔回流中
        .pipe(indexHtmlFilter)      //将出来inde.html以外的所有文件都拿到
        .pipe(rev())        //加版本号
        .pipe(indexHtmlFilter.restore)      //将处理好的文件扔回流中
        .pipe(revReplace())     //更新index.html的文件版本号
        .pipe(gulp.dest('dist'));   //流结束,将流中的文件扔到这个目录下
})

//index.html
//通过gulp-useref插件合并
<!-- build:css css/combined.css -->
    <link rel="stylesheet" href="./css/normalize.css">
    <link rel="stylesheet" href="./js/vendor/owl.carousel.2.1.0/assets/owl.carousel.min.css">
    <link rel="stylesheet" href="./js/vendor/owl.carousel.2.1.0/assets/owl.theme.default.min.css">
    <link rel="stylesheet" href="./css/main.css">
    <!-- endbuild -->

//index.html
<!-- build:js js/combined.js -->
<script src="./js/modernizr.js"></script>
<script src="./js/vendor/jquery.min.js"></script>
<script src="./js/vendor/owl.carousel.2.1.0/owl.carousel.min.js"></script>
<script src="./js/vendor/picturefill.min.js"></script>
<script src="./js/main.js"></script>
<!-- endbuild -->