h5-templete
v0.0.1
Published
基于gulp的自动化开发工具
Downloads
17
Readme
使用gulp快速开发前端项目
项目需配置 node.js + npm 环境
使用gulp自动实现
- 图片压缩
- css代码自动添加浏览器厂商前缀,代码压缩
- js代码检测、压缩
- 代码热更新
- 创建本地小型服务器,可以方便的在手机上调试
1. 项目文件目录
app/---------------------------- 项目源文件
css/
images/
js/
index.html
dist/---------------------------- 经过gulp处理后的文件
gulpfile.js---------------------- gulp配置文件
package.json--------------------- 开发依赖文件
2. 安装开发依赖
cnpm install
3.配置gulp文件
3.1 引入文件,参考common.js规范
var gulp = require('gulp');
var del = require('del');
var browserSync = require('browser-sync').create(); // 静态服务器
var reload = browserSync.reload;
var watch = require('gulp-watch');
var gulpScss = require('gulp-sass'); // 编译sass文件
var imagemin = require('gulp-imagemin');
var $ = require('gulp-load-plugins')();
3.2 配置gulp任务
3.2.1 图片压缩,压缩等级为3级,总共0-7级,参考imagemin配置
gulp.task('image', function() {
return gulp.src('app/images/**/*')------------------------------文件入口
.pipe($.cache(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true })))
.pipe(gulp.dest('dist/images'));----------------------------文件出口,即压缩后的文件的存放路径
});
3.2.2 css压缩,自动添加前缀
gulp.task('css', function () {
gulp.src('app/css/**/*')
.pipe($.autoprefixer())
.pipe($.minifyCss())
.pipe(gulp.dest('dist/css'));
});
3.2.3 js压缩,检测
gulp.task('js', function () {-----------------------------压缩
gulp.src(['app/js/**/*.js'])
.pipe($.jshint.reporter('default'))
.pipe($.uglify())
.pipe(gulp.dest('dist/js'))
});
gulp.task('lint', function () {---------------------------检测
gulp.src('gulpfile.js')
.pipe($.jshint())
.pipe($.jshint.reporter('default'));
});
3.2.4 复制html
gulp.task('html', function () {
gulp.src('app/**/*.html')
.pipe(gulp.dest('dist/'))
});
3.2.5 自动刷新
gulp.task('serve', function () {
browserSync.init({
server:{baseDir:'./app'},
browser:'chrome'
});
});
3.2.6 watch监控
gulp.task('watch', function () {
gulp.watch(['app/**/*'],reload);
});
3.2.7 css,js重命名
gulp.task('rename', function () {
gulp.src(['!dist/**/*min.js','!dist/**/*min.css','dist/**/*.css','dist/**/*.js'])
.pipe($.rename({suffix:'.min'}))
.pipe(gulp.dest('dist/'));
});
3.2.8 scss编译,监控
// 编译scss文件
gulp.task('scss-compile', function () {
gulp.src('app/css/**/*.scss')
.pipe(gulpScss().on('error',gulpScss.logError))
.pipe(gulp.dest('app/css'));
});
// 监控scss文件变化
gulp.task('scss-watch', function () {
gulp.watch('app/**/*.scss',['scss-compile']);
});
clean
gulp.task('clean', function (cb) {
del(['dist/**/*'],cb);
});
4. 配置默认任务
gulp.task('default',['image','js','scss-compile','css','serve','watch']);
如何使用?
gulp -------------------------启动默认任务default
单独启动某一个任务
gulp image---------------------压缩图片
gulp js------------------------压缩js文件