gulp插件学习01

1.安装和使用

• 安装node环境：官网：https：//nodejs.org；
• 命令行输入 npm i gulp -g ，gulp-v查看安装是否成功；
• 创建项目目录；
• 进入目录，并在目录中按住shift＋鼠标右键,进入命令行工具执行npm init -y 初始化项目，此时会自动生成package.json文件；
• dist用于存放gulp任务执行后代码，src为工作源代码；
• 

• -dev的意思是安装成开发依赖，也就是说这个包只有开发环境需要，线上产品环境不需要。这样的话即使删除node_modules也可以直接运行 npm i 就可以根据package.json里面的所有依赖包信息把这些依赖包全局安装进来;

• --production 线上服务器运行环境，项目运行依赖；
• package.json文件中，“scripts” 为常用执行代码快捷命令，采用npm run +‘所定制的快捷命令’ 快速执行代码。
• 创建gulpfile.js文件，在此文件中书写各种Gulp任务;
• 通过https://www.npmjs.com/ 下载各种插件。
• webstrom配置gulp
• 创建gulpfile.js文件，在此文件中书写各种Gulp任务;
• 通过https://www.npmjs.com/ 下载各种插件。
• webstrom中配置gulp

 

2.部分插件简介

• gulp-htmlmin   :html文件压缩；
• gulp-csso        :css文件压缩；
• gulp-babel       :JavaScript语法转化；
• gulp-less  　　:less语法转换为css语法；
• gulp-uglify　　:压缩混淆JavaScript；
• gulp-file-include　　:公共文件包含提取；被提取的网页公共部分中插入（@@include('./common/header.html')
• 

• browsersync　:浏览器实时同步

 

3.部分实现代码

const gulp = require('gulp');
const htmlmin = require('gulp-htmlmin');
const fileinclude = require('gulp-file-include');
const less = require('gulp-less');
const csso = require('gulp-csso');
const babel = require('gulp-babel');
const uglify = require('gulp-uglify');
gulp.task("first",()=>{
    console.log('第一个gulp任务')
     return  gulp.src('../src/css/base.css')
        .pipe(gulp.dest('../dist/css'));
});
gulp.task("htmlmin",()=>{
     return  gulp.src('../src/*.html')
         .pipe(fileinclude())
        .pipe(htmlmin({ collapseWhitespace: true}))
        .pipe(gulp.dest('../dist'));
})
gulp.task('cssmin',()=>{
    return gulp.src(['../src/css/*.less','../src/css/*.css'])
        .pipe(less())
        .pipe(csso())
        .pipe(gulp.dest('../dist/css'))
})
gulp.task('jsmin',()=>{
    return gulp.src('../src/js/*.js')
        .pipe(babel({
            presets: ['@babel/env']
            })
        )
        .pipe(uglify())
        .pipe(gulp.dest('../dist/js'))

})
gulp.task('copy',()=>{
        gulp.src('../src/lib/*')
            .pipe(gulp.dest('../dist/lib'))
    return   gulp.src('../src/images/*')
            .pipe(gulp.dest('../dist/images'))
})
// gulp.task('default',['first','htmlmin','cssmin','jsmin','copy']) 报错 Task function must be specified 

gulp.task('default',gulp.parallel('first','htmlmin','cssmin','jsmin','copy')); 

4.报错解决分析

　　gulp 3 与 gulp 4 版本区别：

　　在Gulp 4.+ 中提供了 gulp.series 和 gulp.garallel   gulp 4.+ => gulp.task 只有两个参数

　　> gulp.series：按照顺序执行

　　> gulp.parallel：同时（并行）执行计算

 　　你的任务是否在这些前置依赖的任务完成之前运行了？请一定要确保你所依赖的任务列表中的任务都使用了正确的异步执行方式：使用一个 callback，或者返回一个 promise 或 stream。

　　 按照官网的说辞，有以下三种 异步任务支持

　　接收一个 callback

　　gulp.task('one',(callback)=>{
　　// coding...
　　callback(); //完成 task
　});

　　gulp.task('default',gulp.series('one',()=>{
　　// coding...
　}));
　　返回一个 stream

　　gulp.task('somename', function() {
　　return gulp.src('client/**/*.js')
　　.pipe(minify())
　　.pipe(gulp.dest('build'));
　});
　　返回一个 promise

　　gulp.task('message', function() {
　　return new Promise(function(resolve, reject) {
　　// coding...
　　resolve();
　　);
　});