言归正传这篇是gulp菜鸟级别的教程。大佬们觉得太简单了请不要喷我，毕竟我也是一个菜鸟。写下这篇笔记，不是为了证明什么，就是方便我以后忘了时候回顾看一下。好，废话不多说 下面开始了1、node环境搭建
想要使用gulp，首先你得在你得电脑里面安装node.js，因为gulp是基于Nodejs的自动任务运行器。这个我就不详细介绍怎么安装了吧，网上教程一搜一大把。相信正在使用gulp的朋友，也知道怎么安装node.js
开发的环境安装好了以后，接下来就是通过命令行来下载相应开发的模块包。什么是命令行？命令行在OSX是终端（Terminal），在windows是命令提示符（Command Prompt）windows系统下 WIN+R打开命令行工具，在里面输入cmd,回车。如下图：
因为npm安装插件是从国外服务器下载，受网络影响大，可能出现异常.
3.1、官方网址：http://npm.taobao.org；
3.2、安装：命令提示符执行npm install cnpm -g --registry=https://registry.npm.taobao.org； 注意：安装完后最好查看其版本号cnpm -v或关闭命令提示符重写打开，安装完直接使用有可能会出现错误；
注：cnpm跟npm用法完全一致，只是在执行命令时将npm改为cnpm（以下操作将以cnpm代替npm）。
4.1、说明：全局安装gulp目的是为了通过她执行gulp任务；
4.2、安装：命令提示符执行
cnpm install gulp -g4.3、查看是否正确安装：命令提示符执行gulp -v，出现版本号即为正确安装。
4.4、依赖安装： npm install gulp --save-dev，这个可以在你的当前的项目目录下，打开命令行工具进行依赖安装。下面我们会在介绍packge.json文件当中介绍为什么需要依赖安装
5.1、package.json文件是基于node.js项目必不可少的配置文件，它是存放在项目根目录的普通json文件，里面有你各个依赖安装模块插件的版本信息，以至于你能清楚看到你安装了那些模块。如下图我安装很多模块以后的json文件。
5.2、配置packge.json文件
npm init //初始化packge.json文件注意：初始化packge.json文件必须在你项目的根目录下打开命令行工具，执行初始化代码。（怎么在当前目录下打开命令行工具？shift+右键。当然，win10系统的命令行工具被微软改版了，叫Powershell，作用还是一样）
既然我们要使用gulp,我们就需要建立一个gulpfile.js文件，gulpfile.js是gulp项目的配置文件，是位于项目根目录的普通js文件。gulp的开发代码都写在这个里面的
js代码：
const gulp=require('gulp'); //引用gulp const del=require('del'); //引用gulp删除插件 const uglify=require('gulp-uglify'); //引用压缩Js插件 const css=require('gulp-clean-css'); //gulp压缩css文件 const rename = require("gulp-rename"); //引用重命名插件 gulp.task('hello',function () { //定义一个hello任务 console.log('hello') }); //task()：定义任务 //src():源文件 // pipe():管道流，接通源头文件与目标文件的输出 // dest():输出文件的目的地 // watch():监视文件//事例： // 1、复制单个文件 gulp.task('copyHtml',function () { return gulp.src('./src/public/login.html').pipe(gulp.dest("dist/public")) }); // 2、复制多个文件 gulp.task('copyAllHtml',function () { return gulp.src("./src/public/*.html").pipe(gulp.dest('dist/public')); }); // 3、复制指定文件 // [指定的文件已，指定的文件2] gulp.task('copy2Js',function () { return gulp.src(["./src/public/js/ajax.js",'dist/public/js/classPage.js']) .pipe(gulp.dest("dist/public/js")) }); // 4、某个文件 // ！排队的文件 gulp.task("copyNoJs",function () { return gulp.src(['./src/public/js/*.js','!./src/public/js/Classroom.js']) .pipe(gulp.dest('dist/public/js')) }); // 5、复制多个后缀名的图片 // {选项一，选项二} gulp.task("copyImage",function () { return gulp.src('./src/public/img/*.{png,jpg,bmp,jpeg,gif}') .pipe(gulp.dest('dist/public/img')) }); // 6、执行多个任务 // gulp.task('任务名称',[任务依赖的模块],回调函数) // 依赖任务之间没有顺序之分，异步执行 // 依赖任务之间完成后，在执行当前的回调函数 gulp.task('build',['copyAllHtml','copyNoJs','copyImage'],function () { console.log('编译成功') }); // 7、Watch:监视文件的变化 gulp.task('myWatch',function () { gulp.watch('./src/public/login.html',['build']) }); // 8、删除文件 gulp.task("del",function () { // del('./dist/public/img/*.{jpg,png,jepg,gif}') // *：所有文件 // **：所有文件夹 del(['./dist/public/js/*']); del(['./dist/**/*']); }); gulp.task('default',function () { gulp.start('serve') }); // 9、压缩js文件 gulp.task('ysjs',function(){ return gulp.src('./src/public/js/*.js') .pipe(uglify()) .pipe(gulp.dest('./src/public/js')); }); //10、 添加监听 gulp.task('watch_js',function(){ return gulp.watch('./src/public/js/*.js',['ysjs']) }); //11、压缩css文件 gulp.task('css',function () { return gulp.src('./src/public/sass/*.css') .pipe(css()) .pipe(gulp.dest('./src/public/sass')) }); //添加监听 gulp.task('jtCss',function () { return gulp.watch('./src/public/sass/*.css',['css']) }); //12、重命名css文件 gulp.task('reName',function () { return gulp.src('./src/public/sass/*.css') .pipe(rename({suffix: '.css'})) .pipe(css()) .pipe(gulp.dest('./src/public/sass')) });7.1、说明：命令提示符执行gulp 任务名称；
7.2、编译less：命令提示符执行gulp testLess；
7.3、当执行gulp default或gulp将会调用default任务里的所有任务[‘testLess’,’elseTask’]
vcode是微软出的一款轻量级代码编辑器，免费而且功能强大，对JavaScript和NodeJS的支持非常好，自带很多功能，例如代码格式化，代码智能提示补全、Emmet插件等。
在vscode上我们想要简单的运行gulp任务，我们可以下载一款名为“Gulp Tasks ”的插件。安装好插件以后，我们将项目文件添加到工作区当中，然后打开gulpfile.js文件。
在左下角我们可以启动任务
10.1、安装nodejs；
10.2、新建package.json文件；
10.3、全局和本地依赖安装gulp；
10.4、安装gulp插件；
10.5、新建gulpfile.js文件；
10.6、通过命令提示符或者开发工具运行gulp任务。
转载于:https://www.cnblogs.com/weichao1996/p/8620652.html
