浅谈gulp创建完整的项目流程

浅谈Gulp创建完整的项目流程可以分为以下几个步骤：

步骤一：安装和初始化

1. 安装Node.js和npm
2. 全局安装gulp：npm install gulp -g
3. 在项目根目录下创建 package.json 文件：npm init
4. 添加gulp依赖：npm install gulp --save-dev

步骤二：创建任务

1. 在项目根目录下创建 gulpfile.js 文件
2. 引入gulp和各种插件

javascript
var gulp = require('gulp'),
sass = require('gulp-sass'),
autoprefixer = require('gulp-autoprefixer'),
concat = require('gulp-concat'),
uglify = require('gulp-uglify');

1. 编写任务代码

```javascript
// 编译SASS
gulp.task('sass', function(){
gulp.src('./src/scss/*.scss')
.pipe(sass())
.pipe(autoprefixer())
.pipe(gulp.dest('./dist/css/'));
});

// 合并和压缩JS
gulp.task('js', function(){
gulp.src('./src/js/*.js')
.pipe(concat('app.js'))
.pipe(uglify())
.pipe(gulp.dest('./dist/js/'));
});
```

步骤三：配置默认任务

我们通常需要在项目中定义一些默认任务，这些任务会自动运行，以便我们修改并保存时能自动编译。

gulp.task('default', function(){
   gulp.watch('./src/scss/*.scss', ['sass']);
   gulp.watch('./src/js/*.js', ['js']);
});

这个任务会自动监测 src/scss 和 src/js 目录下的变动，并对应地执行 sass 和 js 任务。

至此，你的gulp项目就完成了。

示例说明

示范一

实现自动压缩图片

var imagemin = require('gulp-imagemin');

gulp.task('imagemin', function(){
   gulp.src('./src/img/*')
       .pipe(imagemin())
       .pipe(gulp.dest('./dist/img/'))
})

gulp.task('default', function(){
   gulp.watch('./src/scss/*.scss', ['sass']);
   gulp.watch('./src/js/*.js', ['js']);
   gulp.watch('./src/img/*', ['imagemin']);
});

这样，每当我们在 src/img 目录中添加了一个新图片，或更改了一张图片时，Gulp都会自动执行 imagemin 任务，对这张图片进行压缩并输出到 dist/img/ 目录中。

示范二

开启一个web服务器，实时更新

var browserSync = require('browser-sync').create();

gulp.task('serve', function(){
   browserSync.init({
       server: {
           baseDir: './'
       }
   });

   gulp.watch('./src/scss/*.scss', ['sass']).on('change', browserSync.reload);
   gulp.watch('./src/js/*.js', ['js']).on('change', browserSync.reload);
   gulp.watch('./*.html').on('change', browserSync.reload);
});

gulp.task('default', ['serve']);

以上代码会启动一个BrowserSync服务器，当文件变更时自动刷新浏览器，让开发变得更加高效。