# siwi-gulp-start

**Repository Path**: siwi-start/gulp-start

## Basic Information

- **Project Name**: siwi-gulp-start
- **Description**: gulp start
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2017-05-11
- **Last Updated**: 2020-12-20

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

#siwi-gulp-start

# 安装
> yarn install


# 目录结构

> src目录结构

```
── pages
│   ├── common
│   │   ├── footer.pug
│   │   └── header.pug
│   ├── index.pug
│   └── mixins
├── scripts
│   └── index.js
└── styles
    ├── base
    │   └── variables.less
    └── index.less
```

# 运行
* gulp
* gulp serve
* gulp clean


# 任务

> 清除任务

```
gulp.task('clean', function() {
  return del(['dist', 'test'])
})

```

> 编译html

```
gulp.task('pug', function() {
  return gulp.src(paths.pages)
    .pipe(pug())
    .pipe(gulp.dest('test'))
})
```

> 编译css

```
gulp.task('less', function() {
  return gulp.src(paths.styles)
    .pipe(less({
      plugins: [autoprefix]
    }))
    .pipe(csscomb())
    .pipe(gulp.dest('dist/css'))
    .pipe(cleancss())
    .pipe(rename({
      suffix: '.min'
    }))
    .pipe(gulp.dest('dist/css'))
})
```

> 编译js

```
gulp.task('js', function() {
  return gulp.src(paths.scripts)
    .pipe(gulp.dest('dist/js'))
    .pipe(sourcemaps.init())
    .pipe(uglify())
    .pipe(sourcemaps.write())
    .pipe(rename({
      suffix: '.min'
    }))
    .pipe(gulp.dest('dist/js'))
    .pipe(concat('siwi.min.js'))
    .pipe(gulp.dest('dist/js'))
})
```

> 图片压缩

```
gulp.task('images', function() {
  return gulp.src(paths.images)
    .pipe(imagemin({ optimizationLevel: 5 }))
    .pipe(gulp.dest('dist/images'))
})
```

> 开发同步更新

```
gulp.task('serve', ['pug', 'less', 'js'], function() {
  browserSync.init({
    server: "./test"
  })
  gulp.watch("src/pages/*.pug", ['pug'])
  gulp.watch("src/styles/*.less", ['less'])
  gulp.watch("src/scripts/*.js", ['js'])
  gulp.watch("test/*.html").on('change', browserSync.reload)
})
```

> 监听

```
gulp.task('watch', function() {
  gulp.watch('src/styles/*.less', ['less'])
  gulp.watch('src/scripts/*.js', ['js'])
  gulp.watch('src/pages/*.pug', ['pug'])
})
```