# doc

**Repository Path**: doctors-cloud/doc

## Basic Information

- **Project Name**: doc
- **Description**: 相关技术分享总结
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2016-08-24
- **Last Updated**: 2022-08-30

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 前端开发
***
## 代码规范
### 文档结构
### HTML规范
### CSS规范
### JavaScript规范
***
## gulp使用
### 简介
> [gulp](http://www.gulpjs.com.cn)是一种基于流的，代码优于配置的新一代构建工具。

### 使用
1. gulp的使用需要安装包管理工具，推荐使用[npm](https://github.com/npm/npm)，推荐使用npm3版本
2. `npm install --global gulp` 全局安装gulp
3. `npm init` 创建package.json配置文件，已方便添加依赖
4. `npm install --save-dev gulp` 安装开发依赖
5. 在项目根目录下创建*gulpfile.js*文件，文件入口，名字不能变。
```
'use strict';  
var gulp = require('gulp'),
sass = require('gulp-sass'),
cssnano = require('gulp-cssnano'),
    	htmlmin = require('gulp-htmlmin'),
    	lint = require('gulp-jshint'),
    	concat = require('gulp-concat'),
	    uglify = require('gulp-uglify'),
    	jshint = require('gulp-jshint'),
	    rename = require('gulp-rename'),
    	imagemin = require('gulp-imagemin');
		gulp.task('sass', function () {
	    gulp.src('src/css/*.scss')
        .pipe(rename({
            suffix: ".min",
            extname: ".css"
        }))
        .pipe(sass({outputStyle: 'compressed'}))
        .pipe(gulp.dest('source/css'));
		});
		gulp.task('scripts', function () {
	    gulp.src('src/js/*.js')
        .pipe(rename({
            suffix: ".min",
            extname: ".js"
        }))
        .pipe(jshint())
        .pipe(uglify())
        .pipe(gulp.dest('source/js'))
        .on('error', function(err) {
            console.error('Error in compress task', err.toString());
        });
		});
		gulp.task('default', function () {
    	gulp.run( 'sass', 'scripts','html','images');
    	gulp.watch('src/*/*', function () {
        gulp.run( 'sass', 'scripts','images');
		 });
    	gulp.watch('src/*.html', ['html']);
		});
		gulp.task('html', function () {
		gulp.src('src/*.html')
		.pipe(htmlmin({collapseWhitespace: true}))
        .pipe(gulp.dest('pages'))
		});
		gulp.task('images', function () {
        gulp.src('src/img/*')
            .pipe(imagemin())
            .pipe(rename({
                suffix: ".min",
                extname: ".png"
            }))
            .pipe(gulp.dest('source/img'))
		}
		);
```

6. 运行`gulp`命令

### 插件推荐
* [css处理 cssnano](https://www.npmjs.com/package/gulp-cssnano)
* [sass的编译](https://www.npmjs.com/package/gulp-sass)
* [自动添加css前缀 (gulp-autoprefixer)](https://www.npmjs.com/package/gulp-autoprefixer)
* [Html压缩 （gulp-htmlmin)](https://www.npmjs.com/package/gulp-htmlmin)
* [js代码校验 （gulp-jshint)](https://www.npmjs.com/package/gulp-jshint)
* [合并js文件 （gulp-concat](https://www.npmjs.com/package/gulp-concat)
* [压缩js代码 （gulp-uglify](https://www.npmjs.com/package/gulp-uglify)

### 注意事项