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 -->
