gulp 打包配置文件
目前可执行三种命令
- 实时编译scss文件，生成新的css文件
- 监听html,shtm等文件，实时刷新预览
- 监听js文件，实时刷新预览
- 自动监听图片，替换图片时自动刷新预览
- 自动合成新的雪碧图， 实时编译scss文件，生成新的css文件
# 淘宝源
npm config set registry https://registry.npm.taobao.org
# **源
npm config set registry http://registry.cnpmjs.org
# 官方源
npm config set registry http://registry.npmjs.org
npm install fs path gulp del gulp-replace browser-sync gulp-uglify gulp-csso gulp-sass gulp-util gulp-jshint jshint gulp-plumber gulp-dom gulp-strip-comments gulp-rev gulp-rev-collector gulp.spritesmith gulp-autoprefixer run-sequence gulp-filter gulp-html-minify gulp-imagemin gulp-concat browsersync-iis chokidar
gulp dev
实时监听css，js，image，html，shtm等文件
注意：编译scss会生成一个css目录，开发请操作scss文件，请不要操作css文件
gulp dist
会在根目录生成一个dist文件夹
gulp clean
清除打包文件dist目录和版本标记文件rev目录
var paths = {
dev: {
dir: './',
del: ['dist', 'rev'],
clean: ['css'],
sprite: 'sprite',
spriteDir: ['sprite/**/*.{jpg,png}'],
img:['img/**/*.{jpg,jpeg,png,gif,webp}'],
imgDir:['img/**/*.{jpg,jpeg,png,gif,webp}','!img/**/sprite*.{png,jpg}'],
js: ['js/*.js', '!js/{jquery*,*.min,*count,*.class}.js'],
scss: ['scss/*.scss', '!scss/sprite_*.*'],
html: ['**/*.{html,shtm,htm}']
},
dist: {
dir: 'dist',
clean: ['dist'],
css: ['css/*.css', '!css/sprite_*.*'],
html: ['*.{html,shtm}', 'public/*.{html,htm}'],
rev: 'rev/rev-manifest.json'
}
};
根据开发需要配置
- dev: 开发配置选项
- dist: 打包配置选项
{
"link": "",
"rem": false,
"gate": "",
"subdir":"",
"apilink_test": [],
"apilink": "",
"task": {
"checkTitle": true,
"checkH1": true,
"checkTongjiJS": true,
"checkDescKeyword": true,
"checkCharset": true,
"checkLang": true,
"checkTopbar": true
}
}
根据开发需要配置
- "link": 图片服路径
- "gate": 当前站点根目录文件名称（重要），专题不需要，站点必须配置
- "rem": 是否使用rem处理雪碧图
- "subdir": 组件模板路径
- "apilink_test": 打包需要替换的域名
- "apilink": apilink_test选项替换的域名
- "task": html文件需要检查的事项
目前处于开发测试版本，有问题提pr
其他修改包
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent