gulp作为一个在webpackl之前的构建工具,到现在也有很多人使用,这个使用非常的简单。
全局安装后需要在项目中也安装一次哦
全局安装
~~~
npm install gulp -g
~~~
项目中安装
~~~
npm install gulp --save-dev
~~~
在项目根目录下创建一个名为 gulpfile.js 的文件直接写需要为我们执行的事就好啦
下面贴一个我项目中常用的配置:
~~~
var gulp = require('gulp');
var imgMin = require('gulp-imagemin')
var uglify = require('gulp-uglify')
var minifycss = require('gulp-minify-css')
var autoprefixer = require('gulp-autoprefixer')
//拷贝所有html文件 html压缩没多大意义
gulp.task('copyHtml', function() {
gulp.src('productEnvironment/*.html')
.pipe(gulp.dest(''))
})
// 压缩css 自動添加前缀
gulp.task('minifycss', function() {
gulp.src('productEnvironment/css/*')
.pipe(autoprefixer({
browsers: ['last 100 versions'],
cascade: true
}))
.pipe(minifycss())
.pipe(gulp.dest('css'))
});
//图片压缩
gulp.task('minImg', function() {
gulp.src('productEnvironment/img/*')
.pipe(imgMin())
.pipe(gulp.dest('img'))
})
//压缩js
gulp.task('minijs', function() {
gulp.src('productEnvironment/js/*')
.pipe(uglify())
.pipe(gulp.dest('js'))
})
// 默认
gulp.task('default', ['copyHtml', 'minImg', 'minijs', 'minifycss'])
~~~
当然在使用前需要先安装依赖。
package.json
~~~
{
"name": "resume",
"version": "1.0.0",
"description": "",
"main": "main.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": ""
},
"author": "",
"license": "ISC",
"devDependencies": {
"gulp": "^3.9.1",
"gulp-autoprefixer": "^4.1.0",
"gulp-imagemin": "^4.1.0",
"gulp-minify-css": "^1.2.4",
"gulp-uglify": "^3.0.0"
}
}
~~~
- 以专业工程师的标准要求自己
- JS
- 函数的this
- 函数的argument
- 函数的apply、bind、call方法
- 创建对象
- 构造函数创建对象
- 原型结合构造函数创建对象
- 原型
- 继承
- 闭包
- 正则表达式
- Ajax
- 设计模式
- ES6
- es6的模块化
- 定义变量的新方式
- 函数扩展
- 数组扩展
- 性能与工程化
- 关于http与缓存
- 重排(reflow、layout)与重绘
- 页面性能
- gulp
- webpack
- 一些项目回顾总结
- 移动端&微信H5游戏
- 微信小程序
- Vue.js
- 随手记录
- 如何通过前端技能获取2018世界杯门票
- jsonp
- es6 javascript对象方法Object.assign()
- 一份不错的基础面试题
- vscode常用插件
- koroFileHeader
- 构建自己的Js工具库
- H5 game
- Phaser从入坑到放弃再入坑
- 1.游戏的创建
- 2.资源的加载
- 3.phaser中的舞台,世界和摄像机
- 4.游戏缩放控制,移动端的适配
- 5.phaser中的显示对象
- 1.概述
- 2.phaser中的图片,图形,和按钮
- 3.phaser中的精灵
- 4.文字
- 5.组
- 6.phaser中的动画
- 7.粒子和瓦片地图
- 8.瓦片地图
- lodash
- ES5 to ESNext — here’s every feature added to JavaScript since 2015
- 防抖(debounce) 和 节流(throttling)