NodeJs-gulp知识点详解

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"));
});