nodejs--day2笔记

1. 第三方模块Gulp

微信截图_20200122154626.png
微信截图_20200122203901.png

const gulp = require('gulp');//引入
//建立任务
gulp.task('first',(cb) => {
    console.log('第一个gulp');
    gulp.src('./src/css/Starbucks.css')
//获取要处理的文件
    .pipe(gulp.dest('dist/css'));
//将要处理的文件输出到dist目录
    cb();//防止匿名函数出现错误
});

微信截图_20200122161229.png 微信截图_20200122203517.png

gulp-htmlmin

const gulp = require('gulp');
const htmlmin = require('gulp-htmlmin');
gulp.task('htmlmin',(cbb) => {
    gulp.src('./src/*.html')
    //压缩html文件中的代码
    .pipe(htmlmin({ collapseWhitespace: true }))
    //压缩空格
    .pipe(gulp.dest('dist'));
    cbb();
});

cssmin

//css任务
//1.less语法转换
//2.css代码压缩
//
const csso = require('gulp-csso')
const less = require('gulp-less')
gulp.task('cssmin',(qw) =>{
    //选择css目录下的所有less和css文件
    gulp.src(['./src/css/*.less','./src/css/*.css'])
    .pipe(less())//蒋less语法转换为css语法
    .pipe(csso())//将css代码压缩
    .pipe(gulp.dest('dist/css'))
    qw();
})

js任务

1. es6代码转化
   2.代码压缩

//js
//1. es6代码转化
//2.代码压缩
const uglify = require('gulp-uglify');//压缩
const babel = require('gulp-babel');
gulp.task('jsmin',(df) => {
    gulp.src('./src/js/*.js')
    .pipe(babel({
            presets: ['@babel/env']
        }))
    .pipe(uglify())
    .pipe(gulp.dest('dist/js'))
    df();
});

复制文件夹

//复制文件夹
gulp.task('copy',(ds) => {
    gulp.src('./src/img/*')
    .pipe(gulp.dest('dist/img'));
    gulp.src('./src/lib/*')
    .pipe(gulp.dest('dist/lib'));
    ds();
});

package.json

npm init
npm init -y //快速生成

npm install
//自动查找json下载

项目依赖 开发依赖

npm install gulp --save-dev

npm install --production//安装项目依赖dependencies

微信截图_20200123020011.png 微信截图_20200123020025.png

package-lock.json

微信截图_20200123020744.png
微信截图_20200123020800.png

查找规则

微信截图_20200123030026.png
微信截图_20200123021128.png