码迷,mamicode.com
首页 > 其他好文 > 详细

gulp

时间:2020-06-23 21:05:33      阅读:82      评论:0      收藏:0      [点我收藏+]

标签:表示   exp   cat   plugin   span   lmin   item   require   16px   

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文件

gulp

标签:表示   exp   cat   plugin   span   lmin   item   require   16px   

原文地址:https://www.cnblogs.com/ljYYYY/p/13184345.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!