-
什么gulp ?
前端自动化构建工具 之一,市场还有 Grunt,webpack.都是基于nodejs环境. -
gulp的模块
gulp-htmlmin 压缩html,去掉注释,去掉空格等等…gulp-cssmin–>gulp-clean-css,压缩css
gulp-connect 合并js文件
gulp-less 自动生成css
gulp-imagemin 压缩图片
-
gulp的方法
- task 创建人物
- src 指定资源
- pipe 管道方法
- dest 指定目标方法
- watch 监听方法
-
如何使用?
借鉴资料
http://www.ydcss.com/archives/18
1.全局安装
npm install gulp -g
- 项目里面安装
npm install gulp --save-dev
- 引入gulp
- 新建一个文件 gulpfile.js
let gulp=require(“gulp”);
gulp.task(“人物名称”,function(){
gulp.src([‘xxx.html’])
.pipe(组件方法)
.pipe(gulp.dest(‘目标’))
})
结合 browser-sync
var gulp = require('gulp');
var browserSync = require('browser-sync').create();
// 静态服务器
gulp.task('aaa', function() {
browserSync.init({
server: {
baseDir: "./",
port: 8082
},
logLevel: "debug",
port: 8082,
files: ["*.css","*.js","*.html","*.htm"]
});
});