nodejs实现简单的gulp打包

针对“Node.js实现简单的Gulp打包”的完整攻略，可以分为以下几个步骤：

1. 安装Node.js和Gulp

Gulp是一个基于Node.js的自动化构建工具，因此需要先安装Node.js。安装完Node.js之后，可以使用以下命令全局安装Gulp：

npm install --global gulp

1. 初始化项目

在项目目录下新建一个package.json文件，运行以下命令初始化项目：

npm init

在该命令执行过程中，需要填写项目的一些信息，如名称、版本等。

1. 安装所需的Gulp插件

在Gulp中，插件是实现各种功能的核心。为了使用这些插件，需要使用npm安装它们。例如，下面是安装常用的gulp插件的命令：

npm install --save-dev gulp gulp-sass gulp-autoprefixer gulp-cssnano gulp-rename

1. 在项目中创建gulpfile.js文件

gulpfile.js是Gulp的配置文件，其中定义了各种任务以及使用的插件。在项目根目录下创建gulpfile.js文件，并编写以下代码：

const gulp = require('gulp');
const sass = require('gulp-sass');
const autoprefixer = require('gulp-autoprefixer');
const cssnano = require('gulp-cssnano');
const rename = require('gulp-rename');

// 编译Sass
gulp.task('sass', function() {
    return gulp.src('src/scss/*.scss')
        .pipe(sass())
        .pipe(autoprefixer())
        .pipe(gulp.dest('dist/css'))
        .pipe(cssnano())
        .pipe(rename({suffix: '.min'}))
        .pipe(gulp.dest('dist/css'));
});

// 监听文件改动
gulp.task('watch', function() {
    gulp.watch('src/scss/*.scss', gulp.series('sass'));
});

// 入口任务
gulp.task('default', gulp.series(['sass', 'watch']));

其中，定义了两个任务：sass任务用于编译Sass文件并生成压缩和非压缩版本的CSS文件，watch任务用于监听文件改动并自动执行sass任务。default任务是入口任务，执行该任务会自动编译Sass文件并监听文件改动。

1. 在控制台中执行任务

在控制台中使用以下命令执行Gulp任务：

gulp

执行该命令后，Gulp会启动任务，自动编译Sass文件并输出相应的CSS文件。如果要停止任务，可以使用Ctrl + C组合键停止。

示例：

以压缩和非压缩版本的CSS文件生成为例，在gulpfile.js中添加以下代码：

const gulp = require('gulp');
const sass = require('gulp-sass');
const autoprefixer = require('gulp-autoprefixer');
const cssnano = require('gulp-cssnano');
const rename = require('gulp-rename');

// 编译Sass
gulp.task('sass', function() {
    return gulp.src('src/scss/*.scss')
        .pipe(sass())
        .pipe(autoprefixer())
        .pipe(gulp.dest('dist/css'))
        .pipe(cssnano())
        .pipe(rename({suffix: '.min'}))
        .pipe(gulp.dest('dist/css'));
});

// 监听文件改动
gulp.task('watch', function() {
    gulp.watch('src/scss/*.scss', gulp.series('sass'));
});

// 入口任务
gulp.task('default', gulp.series(['sass', 'watch']));

// 自动生成压缩版本的CSS文件
gulp.task('cssnano', function() {
    return gulp.src('dist/css/*.css')
        .pipe(cssnano())
        .pipe(rename({suffix: '.min'}))
        .pipe(gulp.dest('dist/css'));
});

// 工作流示例
gulp.task('workflow', gulp.series(['sass', 'cssnano']));

然后在控制台中执行以下命令：

gulp workflow

该命令会执行sass任务和cssnano任务，最终实现编译Sass文件并生成压缩和非压缩版本的CSS文件。

另外，还可以使用gulp.src()方法和gulp.dest()方法分别读取和输出文件，使用gulp.series()方法和gulp.parallel()方法组合多个任务。例如，在上述示例中，可以新建一个images任务，用于对图片文件进行处理，然后通过gulp.parallel()方法将sass、cssnano和images任务组合起来，最终执行一个包含多个任务的工作流任务。