gulp基本命令
npm i gulp -g //仅在首次执行需要
npm init -y //生成package.json文件
npm i gulp@3 --save-dev //在当前项目中安装gulp
npm i gulp-concat --save-dev //合并文件
npm i gulp-uglify --save-dev //压缩混淆js
//压缩css
npm i gulp-cssmin --save-dev
//压缩html
npm install gulp-minify-html --save-dev
npm i gulp-htmlmin --save-dev
npm i gulp-rename --save-dev //重命名
npm i gulp-load-plugins --save-dev // 所有gulp模块的加载插件
先创建gulpfile.js;
引入插件/模块 //例在js文件中使用require("gulp") 赋值给变量gulp
gulp.task("任务名",function(){}
//在终端输入gulp 任务名,执行,如果任务名是default ,可以直接执行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文件
原文:https://www.cnblogs.com/ljYYYY/p/13184345.html