NodeJs-gulp知识点详解

时间:2021-1-8 作者:admin

gulp

gulp是基于Nodejs的自动任务运行器
能自动化地完成 javascript/coffee/sass/less/html/image/css 等文件的的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成,并监听文件在改动后重复指定的这些步骤

使用流程:

安装nodejs -> 全局安装gulp -> 项目安装gulp以及gulp插件 -> 配置gulpfile.js -> 运行任务

1.安装 nodejs

node -v
npm -v
npm install -g (–save-dev)
-g 全局安装
–save 局部安装并保存到package.json配置中
-dev 存在package.json的devDependencies配置项里,意思是生产环境依赖的模块

npm install -g cnpm –registry=https://registry.npm.taobao.org
可以使用 cnpm 替代 npm 来安装资源

2.全局安装 gulp

npm install gulp@3 -g
或:
cnpm install gulp@3 -g

测试:gulp -v

3.在项目目录下生成 package.json 文件:

npm init

cnpm init

4.在项目目录中本地安装 gulp:

npm install gulp –save-dev
本地安装成功后,会生成 node_modules 文件夹

5.在项目目录中本地安装 gulp 插件https://www.npmjs.com

(1)压缩CSS:gulp-minify-css
npm install gulp-minify-css –save-dev

(2)压缩JS:gulp-uglify
npm install –save-dev gulp-uglify

(3)压缩Html:gulp-htmlmin
npm install –save-dev gulp-htmlmin

(4)将ES6转换为ES5:gulp-babel
npm install –save-dev gulp-babel @babel/core @babel/preset-env

文件合并

npm install –save-dev gulp-concat

gulpfile.js中修改js任务

var concat = require("gulp-concat");
gulp.task("js", function(){
    gulp.src("src/js/**/*.js")
 .pipe(babel({
   presets: ['@babel/env']
 }))
    .pipe(concat('all.js'))
    .pipe(uglify())
    .pipe(gulp.dest("dist/js"))
    .pipe(connect.reload());
});

服务器:gulp-connect

npm install –save-dev gulp-connect

var connect = require('gulp-connect');
gulp.task('server', function() {
    connect.server({
        livereload: true,
        port: 2333
    });
});

处理图片

gulp.task("img", function(){
    gulp.src('src/images/**/*')
    .pipe(gulp.dest('dist/images'))
})
gulp.task("default", ["sass", "html", "minijs", "connect", "watch", "img"]);

sass转css gulp-sass

npm install –save-dev gulp-sass

var sass = require('gulp-sass');
gulp.task('sass', function(){
    gulp.src('src/css/*.scss')
    .pipe(sass())
    .pipe(gulp.dest('dist/css'))
});

watch:监听文件的的变化执行对应的任务

给每一个任务加上pipe(connect.reload())

gulp.task('watch',function(){
    gulp.watch('./src/css/*.scss',['sass']);
    gulp.watch('./src/*.html',['html']);
    gulp.watch('./src/css/*.css',['css']);
    gulp.watch('./src/js/*.js',['js']);
})
gulp.task("default", ["sass", "html", "js", "connect", "watch"]);

gulpfile.js

const gulp = require('gulp');
const minifyCss = require('gulp-minify-css');
const uglify = require('gulp-uglify');
const babel = require('gulp-babel');
const htmlmin = require('gulp-htmlmin');

gulp.task('default', function() {
    // 将你的默认的任务代码放在这
    console.log('gulp启动成功');
});

gulp.task("hello", function(){
    console.log("hello gulp");
});

gulp.task("html", function(){
    gulp.src("src/index.html")
      .pipe(htmlmin({
        removeComments: true,//清除HTML注释
        collapseWhitespace: true,//压缩HTML
        collapseBooleanAttributes: true,//省略布尔属性的值 input标签的 checked="true"
        removeEmptyAttributes: true,//删除所有空格作属性值 input 标签
        removeScriptTypeAttributes: true,//删除script标签的type="textjavascript"
        removeStyleLinkTypeAttributes: true,//删除style标签和link标签的type="text/css"
        minifyJS: true,//压缩页面JS
        minifyCSS: true//压缩页面CSS 
      })
    )
    .pipe(gulp.dest("dist"))
});

gulp.task("css", function(){
  gulp.src("src/css/*.css")
      .pipe(minifyCss())
      .pipe(gulp.dest("dist/css"));
});

gulp.task("js", function(){
  gulp.src("src/js/*.js")
  .pipe(uglify())
  .pipe(gulp.dest("dist/js"));
});
声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。