gulp

Posted 2020-12-12 ljyyyy

gulp基本命令

1. npm i gulp -g //仅在首次执行需要

2. npm init -y //生成package.json文件

3. npm i gulp@3 --save-dev //在当前项目中安装gulp

4. npm i gulp-concat --save-dev //合并文件

5. npm i gulp-uglify --save-dev //压缩混淆js

6. //压缩css

   • npm i gulp-cssmin --save-dev

7. //压缩html

   • npm install gulp-minify-html --save-dev

   • npm i gulp-htmlmin --save-dev

8. npm i gulp-rename --save-dev //重命名

9. npm i gulp-load-plugins --save-dev // 所有gulp模块的加载插件

gulp 的使用

1. 先创建gulpfile.js;

2. 引入插件/模块 //例在js文件中使用require("gulp") 赋值给变量gulp

3. gulp.task("任务名",function(){}

   • //在终端输入gulp 任务名，执行,如果任务名是default ，可以直接执行gulp，不需要任务名

4. 使用插件

   let gulp = require("gulp");

   let concat = require("gulp-concat");

   let cssmin = require("gulp-cssmin")

   let uglify = require("gulp-uglify");

   let rename = require("gulp-rename");

   let plugins = require("gulp-load-plugins")();

   例：

let gulp = require("gulp");

let concat = require("gulp-concat");

let cssmin = require("gulp-cssmin")

let uglify = require("gulp-uglify");

let rename = require("gulp-rename");

let plugins = require("gulp-load-plugins")();

gulp.task("task1",function(){
    gulp.src(‘./css/a.css‘).pipe(gulp.dest(‘./gulpCss‘))//拷贝
})

gulp.task("task2",function(){
    gulp.src(‘./css/*.css‘).pipe(concat("concat.css")).pipe(gulp.dest(‘./gulpCss‘))
    //合并css文件
})

gulp.task("task3", function () {
    gulp.src(‘./css/*.css‘).pipe(concat("concat.css")).pipe(gulp.dest(‘./gulpCss‘)).pipe(cssmin()).pipe(gulp.dest(‘./gulpCss‘))
//压缩css
})

gulp.task("task4",function(){
    gulp.src("./js/a.js").pipe(uglify()).pipe(gulp.dest("./gulpCss/"))
    //压缩、混淆js
})

gulp.task("task5",function(){
    gulp.src("./css/*.css").pipe(concat("main.css")).pipe(cssmin()).pipe(rename("main.min.css")).pipe(gulp.dest("./gulpCss/"))
    //重命名
})

gulp-load-plugins ：

gulp.task("task7",function(){
    gulp.src("./css/*.css").pipe(plugins.concat("main.css")).pipe(plugins.cssmin()).pipe(plugins.rename("main.min.css")).pipe(gulp.dest("./gulpCss/"))
    console.log(plugins)
})

5 . 监听watch

 gulp.task("task7",function(){
    gulp.src("./css/*.css").pipe(plugins.concat("main.css")).pipe(plugins.cssmin()).pipe(plugins.rename("main.min.css")).pipe(gulp.dest("./gulpCss/"))
    console.log(plugins)
})

* *目录表示当前文件夹和其所有后代文件夹，

例如gulp.src("./gulp/* */ *.js") 表示gulp下的所有后代文件夹下的所有js文件