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

最新推荐文章于 2021-08-07 09:44:46 发布

强哥blog

最新推荐文章于 2021-08-07 09:44:46 发布

阅读量494

点赞数

分类专栏：自动化工具文章标签： gulp模板 gulp工具 gulp gulp压缩

本文链接：https://blog.csdn.net/qq_36263601/article/details/74255027

版权

自动化工具专栏收录该内容

4 篇文章 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: "./"
        }
    });
});