Note ---- About Gulp

Posted 2020-08-28

1.配置node环境

http://nodejs.cn/download/ 

 

node -v

npm -v

 

2.安装cnpm

npm install cnpm -g --registry=https://registry.npm.taobao.org

cnpm -v 

 

3.新建package.json

package.json是基于nodejs项目必不可少的配置文件，它是存放在项目根目录的普通json文件；

cnpm init

npm init

 

4.全局安装gulp

$ cnpm install gulp -g

$ npm install --global gulp

gulp -v

5.本地安装gulp插件

全局安装gulp是为了执行gulp任务，本地安装gulp则是为了调用gulp插件的功能
进入你的项目文件路径中后，执行

$ cnpm install gulp --save-dev 

$ npm install gulp --save-dev 

 

6.安装gulp-sass插件

（拿该插件进行示例）进入你的项目文件路径中后，执行

cnpm install gulp-sass --save-dev

 

安装插件：

自动添加css前缀（ gulp-autoprefixer ）

压缩css（ gulp-minify-css ） 

js代码校验（ gulp-jshint ）

合并js文件（ gulp-concat ） 

压缩js代码（ gulp-uglify ） 

压缩图片（ gulp-imagemin ） 

自动刷新页面（ gulp-livereload ） 

图片缓存，只有图片替换了才压缩（ gulp-cache ） 

更改提醒（ gulp-notify ） 

清除文件（ del ）

 

7.新建gulpfile.js

 

//导入工具包 require(‘node_modules里对应模块‘)  
var gulp = require(‘gulp‘), //本地安装gulp所用到的地方  
    less = require(‘gulp-less‘);  
  
//定义一个testLess任务（自定义任务名称）  
gulp.task(‘testLess‘, function () {  
    gulp.src(‘src/less/index.less‘) //该任务针对的文件  
        .pipe(less()) //该任务调用的模块  
        .pipe(gulp.dest(‘src/css‘)); //将会在src/css下生成index.css  
});  
  
gulp.task(‘default‘,[‘testLess‘]); //定义默认任务  
  
//gulp.task(name[, deps], fn) 定义任务  name：任务名称 deps：依赖任务名称 fn：回调函数  
//gulp.src(globs[, options]) 执行任务处理的文件  globs：处理的文件路径(字符串或者字符串数组)   
//gulp.dest(path[, options]) 处理完后文件生成路径 

　

8.运行gulp

9.通过命令提示符运行gulp任务