node.js中gulp的使用

1.gulp的定义和应用

• 定义：基于node平台开发的前端构建工具
• 应用：项目上线，HTML、CSS、JS文件压缩合并、公共文件抽离、语法装换（es6、less）、修改文件浏览器自动刷新

2.gulp的使用以及其方法

使用方法如下：

1. 使用npm install gulp下载gulp库文件
2. 在项目根目录下建立gulpfile.js文件
3. 重构项目的文件夹结构src目录放置源代码文件dist目录放置构建后文件
4. 在gulpfile.js文件中编写任务
5. 在命令行工具中执行gulp任务

gulp中的方法有：

1. gulp.src() 获取要处理的文件
2. gulp.task() 建立gulp人物
3. gulp.dest() 输出处理后的文件
4. gulp.watch() 监听文件的变化

/**********示例*******/
// gulpfile.js
// 获取gulp模块
const gulp = require('gulp');

gulp.task('copy', () => {
   console.log('copy success');
   gulp.src('./src/demo.txt');
   .pipe(gulp.dest('./dist/')); // 在命令行执行gulp后复制一份demo.txt到dist中

/*******
当在命令行执行(某一功能而不是全部执行)gulp之前需要安装gulp命令行
全部执行：node ./gulpfile.js
执行某一功能：gulp copy
*******/
/*******
当在执行命令行如若显示 Did you forget to signal async completion
解决办法如下：
- gulp.task('copy',async() => {
   await console.log('copy success');
   ...
   ...
}
- gulp.task('copy',done => {
   console.log('copy success');
   ...
   ...
   done();
}
*******/
}

3.gulp中常用的插件

• gulp-htmlmin ：html文件压缩
• gulp-csso ：压缩css
• gulp-babel ：JavaScript语法转化
• gulp-less ：less语法转化
• gulp-uglify ：压缩混淆JavaScript
• gulp-file-include ：公共文件包含
• browsersync ： 浏览器实时同步

/************gulp-htmlmin用法********/
const gulp = require('gulp');
const htmlmin = require('gulp-htmlmin');

gulp.task('htmlmin',async() => {
	await gulp.src('./src/*.html')
			  .pipe(htmlmin({ collapseWhitespace: true }))
			  .pipe(dest('dist'));
});
/************gulp-csso用法**********/
var gulp = require('gulp');
var csso = require('gulp-csso');
 
gulp.task('default', async () {
    await gulp.src('./main.css')
        	  .pipe(csso())
       	      .pipe(gulp.dest('./out'));
});
/************gulp-less用法**********/
var less = require('gulp-less');
var path = require('path');
 
gulp.task('less', async () {
  await gulp.src('./less/**/*.less')
    		.pipe(less({
      			paths: [ path.join(__dirname, 'less', 'includes') ]
    		}))
    		.pipe(gulp.dest('./public/css'));
});
/************gulp-file-include用法**********/
const fileinclude = require('gulp-file-include');
const gulp = require('gulp');
 
gulp.task('fileinclude', async() {
  await gulp.src(['index.html'])
    		.pipe(fileinclude({
     		 prefix: '@@',
      		 basepath: '@file'
    		}))
    		.pipe(gulp.dest('./'));
});
/************gulp-babel用法**********/
const gulp = require('gulp');
const babel = require('gulp-babel');
 
gulp.task('default', async() =>
    await gulp.src('src/app.js')
        	  .pipe(babel({
        	  		// 它可以判断当前代码的运行环境 将代码转换为当前运行环境所支持的代码
            		presets: ['@babel/env']
        }))
        	  .pipe(gulp.dest('dist'))
);
/************gulp-uglify用法**********/
var gulp = require('gulp');
var uglify = require('gulp-uglify');
var pipeline = require('readable-stream').pipeline;
 
gulp.task('compress', async() {
  await pipeline(
        gulp.src('lib/*.js'),
        uglify(),
        gulp.dest('dist')
  );
});