Gulp使用-原创手记-慕课网

什么是Gulp

Gulp是基于nodejs的一款前端自动化构建工具，可以打包编译各种前端代码

Gulp有什么优势

按照官网的解释，gulp有以下优点：

通过代码优于配置的策略，Gulp 让简单的任务简单，复杂的任务可管理
利用 Node.js 流的威力，你可以快速构建项目并减少频繁的 IO 操作。
Gulp 严格的插件指南确保插件如你期望的那样简洁高质得工作。
通过最少的 API，掌握 Gulp 毫不费力，构建工作尽在掌握：如同一系列流管道。安装
```
#全局安装
npm install --global gulp
```

局部安装

npm install --save-dev gulp

## 使用
在项目根目录下创建gulpfile.js文件
```js
//加载依赖模块和插件
const gulp = require('gulp'),
    rename = require('gulp-rename'),
    plumber = require('gulp-plumber'),
    BrowserSync = require('browser-sync'),
    watch = require('gulp-watch'),
    sourcemaps = require('gulp-sourcemaps'),
    sass = require('gulp-sass'),
    minifyCss = require('gulp-clean-css'),
    spritesmith = require('gulp.spritesmith'),
    basePath = 'app/scripts',
    es6path = basePath + '/**/es6/*.js',
    csspath = 'app/**/*.css',
    sasspath = 'app/sass',
    autoprefixer = require('gulp-autoprefixer');
//创建gulp,编译sass文件
gulp.task('sass', () => {
    return gulp.src(`${sasspath}/main.scss`)
        .pipe(sourcemaps.init())
        .pipe(sass().on('error', sass.logError))
        .pipe(rename(function(path) {
            path.extname = '.css';
            return path;
        }))
        .pipe(gulp.dest('app/sass/'))
        .pipe(minifyCss())
        .pipe(autoprefixer({
            browsers: ['last 4 versions'],
            cascade: false
        }))
        .pipe(rename(function(path) {
            path.basename += '-min';
            return path;
        }))
        .pipe(sourcemaps.write('./', {
            sourceMappingURL: function(file) {
                return '/assets/sass/' + file.relative + '.map';
            }
        }))
        .pipe(gulp.dest('app/sass/'));
});
gulp.task('default',['sass'])

接下来我们去添加npm script命令,修改package.json

"scripts": {
    "dev": "gulp default"
  }

之后我们去运行npm命令来编译sass文件

npm run dev

总结

gulp有很多插件可以处理各种文件，相比Grunt用起来更加简单方便。