gulp 入门教程_综合

一、安装

先安装node（网上有很多node的安装教程）
然后执行以下命令即可
- 安装gulp命令行实用程序
```
npm install --global gulp-cli
```
- 创建项目目录并导航到该目录
```
mkdir my-projectcd my-project
```
- 在项目目录中创建package.json文件
```
npm init
```
- 在devDependencies中安装gulp包
```
npm install --save-dev gulp
```

二、基础

配置文件
- 项目根目录下的gulpfile.js
创建任务
- 每个gulp任务都是一个异步javaScript函数
- 任务分为公共任务和私人任务

撰写任务

按顺序执行任务，请使用series()方法

const {
        series} = require('gulp');function task1(cb) {
        cb();
}function task2(cb) {
        cb();
}exports.build = series(task1, task2);

对于并发性运行的任务，请使用parallel()方式

const {
        parallel} = require('gulp');function task1(cb) {
        cb();
}function task2(cb) {
        cb();
}exports.build = parallel(task1, task2);

series()和parallel()方法可以嵌套使用

const {
        series, parallel} = require('gulp');function task1(cb) {
        cb();
}function task2(cb) {
        cb();
}function task3(cb) {
        cb();
}exports.build = series(task1, parallel(task2, task3));

在命令行执行任务

# 不加task默认会执行default任务
gulp [task] [otherTask]

三、API

src(globs, [options]) ：创建一个流

用例

const {
      src, dest} = require('gulp');function copy() {
      retrun src('input/*.js').pipe(dest('output/'));
}exports.copy = copy;

dest(directory, [options]) ：创建用于写入文件系统的流

用例

const {
      src, dest} = require('gulp');function copy() {
      retrun src('input/*.js').pipe(dest('output/'));
}exports.copy = copy;

series(…tasks) ：将任务组成更大的操作，这些任务按顺序一次执行

用例

const {
      series} = require('gulp');function task1(cb) {
      cb();
}function task2(cb) {
      cb();
}exports.build = series(task1, task2);

parallel(…tasks) ：讲任务组成更大的操作，这些任务会并发执行

用例

const {
      parallel} = require('gulp');function task1(cb) {
      cb();
}function task2(cb) {
      cb();
}exports.build = parallel(task1, task2);

watch(globs, [options], [task]) ：在文件发生更改时运行任务

用例

const {
      watch} = require('gulp');watch(['input/*.js', '!input/something.js'], function(cb) {
      cb(); 
});

task([taskName], taskFunction) ：用于定义任务的api，此api不再是推荐的模式

用例

// 将命名函数注册为任务
const {
      task} = require('gulp');function build(cb) {
      cb();
}task(build);

// 将匿名函数注册为任务
const {
      task} = require('gulp');task('build', function(cb) {
      cb(); 
});

// 检索先前已注册的任务
const {
      task} = require('gulp');task('build', funciton(cb) {
      cb();
});const build = task('build');

四、使用案例

const connect = require('gulp-connect');
const htmlmin = require('gulp-htmlmin');  
const uglify = require('gulp-uglify');
const sass = require('gulp-sass');
const babel = require('gulp-babel');
const imagemin = require('gulp-imagemin');
const pngquant = require('imagemin-pngquant');
const cache = require('gulp-cache');
const rename = require('gulp-rename');
const runSequence = require('gulp-sequence');
const del = require('del');//path
let path = {
    //其他资源 pathstaticPath: ['src/build/css/*.*'],//html patnhtmlPath: ['src/**/*.html'],//sass pathsassPath: ['src/build/sass/*.scss'],//js pathjsPath: ['src/build/js/*.js'],//images pathimagesPath: ['src/build/img/*.{png,jpg,gif,ico}'],// clear pathclean: ['./dist/**/*.*']
}// default 默认执行任务
gulp.task('default',cb => {
    runSequence('clean', // 第一步：清理目标目录'dest', // 第二步：打包'watch', // 第三步：监控cb);
});//Clean target
gulp.task('clean', function(){
    del(path.clean).then(function(){
    console.log('Deleted files and folders:\n' + JSON.stringify(path));});
});//拷贝静态资源文件
gulp.task('file',() => {
    //获取文件gulp.src(path.staticPath)//让文件流走向下个环节.pipe(gulp.dest('dist/build'))
})
//当文件修改时自动同步
gulp.task('watchFile',() => {
    gulp.watch(path.staticPath,['file']);})//压缩同步html
gulp.task('html',() => {
    gulp.src(path.htmlPath)//html压缩.pipe(htmlmin({
    removeComments: true,//清除HTML注释collapseWhitespace: true,//压缩HTMLremoveEmptyAttributes: true,//删除所有空格作属性值 <input id="" /> ==> <input />removeScriptTypeAttributes: true,//删除<script>的type="text/javascript"removeStyleLinkTypeAttributes: true,//删除<style>和<link>的type="text/css"minifyJS: true,//压缩页面JSminifyCSS: true//压缩页面CSS})).pipe(gulp.dest('dist/'));
});
//当html修改时自动同步
gulp.task('watchHtml',() => {
    gulp.watch(path.htmlPath,['html']);});//让sass转换为css
gulp.task('sass',() => {
    gulp.src(path.sassPath)//scss转换成css，并设置css转换格式.pipe(sass({
    outputStyle: 'compressed'}).on('error', sass.logError)).pipe(rename({
     extname: '.min.css' })).pipe(gulp.dest('src/build/css'));
});
//当scss文件修改时自动转译同步
gulp.task('watchSass',() => {
    gulp.watch(path.sassPath,['sass']);});//转译压缩js
gulp.task('babel',() => {
    gulp.src(path.jsPath)//jsEs5转译.pipe(babel({
    presets: ['env']}))//js压缩.pipe(uglify()).pipe(rename({
     extname: '.min.js' })).pipe(gulp.dest('dist/build/js'));
});
//当js文件被修改的时候自动转译同步
gulp.task('watchBabel',() => {
    gulp.watch(path.jsPath,['babel']);});//图片压缩
gulp.task('imagemin', function () {
    gulp.src(path.imagesPath).pipe(cache(imagemin({
    interlaced: true,progressive: true, //类型：Boolean 默认：false 无损压缩jpg图片svgoPlugins: [{
    removeViewBox: false}], //不要移除svg的viewbox属性use: [pngquant({
    optimizationLevel: 4})] //使用pngquant深度压缩png图片的imagemin插件}))).pipe(gulp.dest('dist/build/img'));
});
//当图片修改的时候自动压缩同步
gulp.task('watchImagemin',() => {
    gulp.watch(path.imagesPath,['imagemin']);});// 打包构建所有的文件
gulp.task('dest',cb => {
    runSequence(['file','html','sass','babel','imagemin'],cb)});
// 自动转译同步所有的文件
gulp.task('watch',cb => {
    runSequence(['watchFile','watchHtml','watchSass','watchBabel','watchImagemin'],'connect','watchRehtml',cb)});//设置本地服务
gulp.task('connect',() => {
    connect.server({
    root: 'src',host: '192.168.2.15',livereload: true,port: 8888});
});
//跟新本地文件同步到浏览器
gulp.task('rehtml',() => {
    gulp.src('src/**/*.*').pipe(connect.reload());
});
//本地跟新文件自动同步到浏览器
gulp.task('watchRehtml',() => {
    gulp.watch(['src/**/*.*'], ['rehtml']);});