h5-templete
基于gulp的自动化开发工具
Last updated 6 months ago by pengyuanyuan .
ISC · Original npm · Tarball
$ cnpm install h5-templete 
SYNC missed versions from official npm registry.

使用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文件

用gulp开发的一个小案例

Maintainers (1)
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 0
Dependencies (365)
Dev Dependencies (15)
Dependents (0)
None

Copyright 2014 - 2017 © taobao.org |