gulp创建任务模板（less/压缩/合并/最小化图片）

今天药忘吃喽~ 2022-06-13 09:17 175阅读 0赞

## 操作流程 ##

*  首先通过 gulp.src() 方法获取到想要处理的文件流
 *  然后把文件流通过 pipe 方法导入到 gulp 的插件中
 *  最后把经过插件处理后的流再通过pipe方法导入到 gulp.dest() 方法中
 *  gulp.dest() 方法则把流中的内容写入到文件中

**package.json**
    {
      "name": "code",
      "version": "1.0.0",
      "description": "",
      "main": "index.js",
      "scripts": { "test": "echo \"Error: no test specified\" && exit 1" },
      "author": "",
      "license": "ISC",
      "devDependencies": { "browser-sync": "^2.11.1", "gulp": "^3.9.0", "gulp-cssnano": "^2.1.0", "gulp-less": "^3.0.5" } }

**gulpfile.js**
    
    'use strict';
    
    // 此处代码都是由NODE执行
    // 载入Gulp模块
    var gulp = require('gulp');
    var less = require('gulp-less');
    
    // 注册一个任务
    gulp.task('copy', function() { 
      // 当gulp执行这个say任务时会自动执行该函数
      // console.log('hello world');
      // 合并 压缩之类的操作
      // 复制文件
      // gulo.src取一个文件
      gulp.src('src/index.html')
        .pipe(gulp.dest('dist/')); // 将此处需要的操作传递进去
    });
    
    
    gulp.task('dist', function() { 
      // src/index.html
      gulp.watch('src/index.html', ['copy']);
      gulp.watch('src/styles/*.less', ['style']);
    });
    
    var cssnano = require('gulp-cssnano');
    
    gulp.task('style', function() { 
      gulp.src('src/styles/*.less')
        .pipe(less()) // 该环节过后就是CSS
        .pipe(cssnano())
        .pipe(gulp.dest('dist/css/'));
    });
    
    var browserSync = require('browser-sync').create();
    
    // Static server
    gulp.task('serve', function() { 
        browserSync.init({
            server: {
                baseDir: "./"
            }
        });
    });

### 常用插件 ###

*  [编译 Less：gulp-less][Less_gulp-less]
 *  [创建本地服务器：gulp-connect][gulp-connect]
 *  [合并文件：gulp-concat][gulp-concat]
 *  [最小化 js 文件：gulp-uglify][js _gulp-uglify]
 *  [重命名文件：gulp-rename][gulp-rename]
 *  [最小化 css 文件：gulp-minify-css][css _gulp-minify-css]
 *  [压缩html文件 gulp-minify-html][html_ gulp-minify-html]
 *  [最小化图像：gulp-imagemin][gulp-imagemin]

[Less_gulp-less]: https://www.npmjs.com/package/gulp-less
[gulp-connect]: https://www.npmjs.com/package/gulp-connect
[gulp-concat]: https://www.npmjs.com/package/gulp-concat
[js _gulp-uglify]: https://www.npmjs.com/package/gulp-uglify
[gulp-rename]: https://www.npmjs.com/package/gulp-rename
[css _gulp-minify-css]: https://www.npmjs.com/package/gulp-minify-css
[html_ gulp-minify-html]: https://www.npmjs.com/package/gulp-minify-html
[gulp-imagemin]: https://www.npmjs.com/package/gulp-imagemin