@1002522146
2018-05-25T09:11:16.000000Z
字数 5329
阅读 466
项目构建
Gulp介绍
安装nodejs, 查看版本: node -v
创建一个简单的应用gulp_test
|- dist
|- src
|- js
|- css
|- less
|- index.html
|- gulpfile.js-----gulp配置文件
|- package.json
{
"name": "gulp_test",
"version": "1.0.0"
}
安装gulp:
全局安装gulp
npm install gulp -g
局部安装gulp
npm install gulp --save-dev
配置编码: gulpfile.js
//引入gulp模块
var gulp = require('gulp');
//定义默认任务
gulp.task('default', function() {
// 将你的默认的任务代码放在这
});
构建命令:
gulp
使用gulp插件
创建js文件
src/js/test1.js
(function () {
function add(num1, num2) {
var num3 = 0;
num1 = num2 + num3;
return num1 + num2;
}
console.log(add(10, 30));
})();
src/js/test2.js
(function () {
var arr = [2,3,4].map(function (item, index) {
return item+1;
});
console.log(arr);
})();
下载插件:
npm install gulp-concat gulp-uglify gulp-rename
--save-dev
配置编码
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
gulp.task('minifyjs', function() {
return gulp.src('src/js/*.js') //操作的源文件
.pipe(concat('built.js')) //合并到临时文件
.pipe(gulp.dest('dist/js')) //生成到目标文件夹
.pipe(rename({suffix: '.min'})) //重命名
.pipe(uglify()) //压缩
.pipe(gulp.dest('dist/js'));
});
gulp.task('default', ['minifyjs']);
页面引入js浏览测试 : index.html
<script type="text/javascript" src="dist/js/built.min.js"></script>
创建less/css文件
src/css/test1.css
#div1 {
width: 100px;
height: 100px;
background: green;
}
src/css/test2.css
#div2 {
width: 200px;
height: 200px;
background: blue;
}
src/less/test3.less
@base: yellow;
.index1 { color: @base; }
.index2 { color: green; }
下载插件:
npm install gulp-less gulp-clean-css --save-dev
配置编码
var less = require('gulp-less');
var cleanCSS = require('gulp-clean-css');
//less处理任务
gulp.task('lessTask', function () {
return gulp.src('src/less/*.less')
.pipe(less())
.pipe(gulp.dest('src/css'));
})
//css处理任务, 指定依赖的任务
gulp.task('cssTask',['lessTask'], function () {
return gulp.src('src/css/*.css')
.pipe(concat('built.css'))
.pipe(gulp.dest('dist/css'))
.pipe(rename({suffix: '.min'}))
.pipe(cleanCSS({compatibility: 'ie8'}))
.pipe(gulp.dest('dist/css'));
});
gulp.task('default', ['minifyjs', 'cssTask']);
页面引入css浏览测试 : index.html
<link rel="stylesheet" href="dist/css/built.min.css">
<div id="div1" class="index1">div1111111</div>
<div id="div2" class="index2">div2222222</div>
处理html
下载插件:
npm install gulp-htmlmin --save-dev
配置编码
var htmlmin = require('gulp-htmlmin');
//压缩html任务
gulp.task('htmlMinify', function() {
return gulp.src('index.html')
.pipe(htmlmin({collapseWhitespace: true}))
.pipe(gulp.dest('dist'));
});
gulp.task('default', ['minifyjs', 'cssTask', 'htmlMinify']);
修改页面引入
<link rel="stylesheet" href="css/built.min.css">
<script type="text/javascript" src="js/built.min.js"></script>
打包测试: gulp
下载插件
npm install gulp-livereload --save-dev
配置编码:
var livereload = require('gulp-livereload');
//所有的pipe
.pipe(livereload());
gulp.task('watch', ['default'], function () {
//开启监视
livereload.listen();
//监视指定的文件, 并指定对应的处理任务
gulp.watch('src/js/*.js', ['minifyjs'])
gulp.watch(['src/css/*.css','src/less/*.less'], ['cssTask']);
});
自动刷新页面
下载插件
npm install open
测试访问:
gulp.task('server',['build'], function () {
//配置服务器选项
$.connect.server({
root : 'dist/',//监视的源目标文件路径
livereload : true,//是否实时刷新
port : 5000//开启端口号
});
open('http://localhost:5000/');
//确认监视的目标并且绑定相应的任务
gulp.watch('src/js/*.js', ['js']);
gulp.watch(['src/css/*.css', 'src/less/*.less'], ['css', 'less']);
})
gulpfile.js 完整代码
var gulp = require('gulp');
var $ = require('gulp-load-plugins')();
// var concat = require('gulp-concat');
// var uglify = require('gulp-uglify');
// var rename = require('gulp-rename');
// var less = require('gulp-less');
// var cleanCss = require('gulp-clean-css');
// var htmlmin = require('gulp-htmlmin');
// var livereload = require('gulp-livereload');
// var connect = require('gulp-connect');
var open = require('open');
gulp.task('js',function () {
return gulp.src('src/js/*.js')
.pipe($.concat('build.js'))
.pipe(gulp.dest('dist/js'))
.pipe($.uglify('dist/js/*.js'))
.pipe($.rename({suffix:'.min'}))
.pipe(gulp.dest('dist/js'))
// .pipe(livereload())
.pipe($.connect.reload());
})
gulp.task('less',function () {
return gulp.src('src/less/*.less')
.pipe($.less())
.pipe(gulp.dest('src/css'))
// .pipe(livereload())
.pipe($.connect.reload());
});
gulp.task('cssMin',['less'],function () {
return gulp.src('src/css/*.css')
.pipe($.concat('build.css'))
.pipe($.cleanCss())
.pipe($.rename({compatibility: 'ie8'}))
.pipe(gulp.dest('dist/css/'))
// .pipe(livereload())
.pipe($.connect.reload());
});
gulp.task('htmlMin',function () {
return gulp.src('./index.html')
.pipe($.htmlmin({collapseWhitespace: true}))
.pipe(gulp.dest('dist'))
// .pipe(livereload())
.pipe($.connect.reload());
})
//办自动加载任务 <--- 这个得安装插件
// gulp.task('watch',['default'],function () {
// // 开启监视
// livereload.listen();
// gulp.watch('src/js/*.js',['js']);
// gulp.watch(['src/less/*.less','src/css/*.css'],['less','cssMin'])
// });
//全自动加载任务
gulp.task('server',['build'],function () {
$.connect.server({
root:'dist/',
livereload:true,
port:5000
})
open('http://localhost:5000');
gulp.watch('src/js/*.js',['js']);
gulp.watch(['src/less/*.less','src/css/*.css'],['less','cssMin'])
});
gulp.task('build',['js','less','cssMin','htmlMin'])
gulp.task('default',['server']);