gulp教程记录

GULP

gulp能够做什么东西？（以前这些工作都是人工做的）

检查JavaScript
编译Sass（或Less之类的）文件
图片压缩
Css Js 合并
Css Js 内联
压缩并重命名合并后的JavaScript
变更静态资源
给静态资源添加md5
合并雪碧图
自动刷新浏览器
ESLint
rem移动端适配方案

等等。。

gulp的配置文件gulpfile.js（其实整个gulp的配置文件，基本上都是在做一些任务的配置，比如创建任务，监听任务等等）

结合gulp的API https://www.gulpjs.com.cn/docs/api/

gulp只有5个方法

task：这个API用来创建任务，在命令行下可以输入gulp test来执行test的任务
run：这个API用来运行任务
watch：这个API用来监听任务
src：这个API设置需要处理的文件路径，可以是多个文件以数组的形式[main.scss,vender.scss]，也可以是正在表达式/*.scss
dest：这个API设置生成文件的路径，一个任务可以有多个生成路径，一个可以输出未压缩的版本，一个可以输出压缩后的版本

gulp的使用：

通过npm建立一个项目

//我的叫做gulp-study，也就是建立一个文件夹然后在当前文件夹下面运行npm init
//建立文件夹
mkdir gulp-study
//在当前文件夹运行npm init初始化项目
npm init

通过npm自动话构建需要的依赖

gulp：本地gulp
gulp-concat：主要用于合并文件，减少http请求
gulp-imagemin：用于压缩图片
gulp-jshint：用于js检查
gulp-less：用于编译less文件
gulp-minify-css：用于压缩css文件
gulp-rename
gulp-sass：用于编译sass文件
gulp-uglify：用于打乱文件

npm install –save-dev gulp gulp-concat jshint gulp-jshint gulp-less gulp-rename gulp-sass gulp-uglify gulp-minify-css gulp-imagemin

扫描二维码关注公众号，回复： 999152 查看本文章

安装完成后的package.json就是下面的样子

{
  "name": "gulp-study",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "npm run start"
  },
  "author": "LQ",
  "license": "MIT",
  "devDependencies": {
    "gulp": "^3.9.1",
    "gulp-concat": "^2.6.1",
    "gulp-imagemin": "^4.1.0",
    "gulp-jshint": "^2.1.0",
    "gulp-less": "^3.5.0",
    "gulp-minify-css": "^1.2.4",
    "gulp-rename": "^1.2.2",
    "gulp-sass": "^4.0.1",
    "gulp-uglify": "^3.0.0",
    "jshint": "^2.9.5",
    "node-less": "^1.0.0",
    "require": "^2.4.20"
  },
  "dependencies": {
    "node-sass": "^4.9.0"
  }
}

很重要的一步编写gulpfile.js文件（自动话构建就是根据这个文件来）

//gulp是代码由于配置的思想
//gulp只有5个方法，task，run，watch，src，和dest

//引入gulp
var gulp = require("gulp");

//引入组件
var jshint = require("gulp-jshint");
var sass = require("gulp-sass");
var less = require("gulp-less");
var concat = require("gulp-concat");
var uglify = require("gulp-uglify");
var minifycss = require("gulp-minify-css");
var rename = require("gulp-rename");

//gulp.src("src/js/*.js");
//创建一个个任务编译less
gulp.task('less',function(){
  gulp.src('src/less/*.less')  //该任务针对的文件夹
      .pipe(less())  //该任务的调用模块
      .pipe(minifycss())
      .pipe(gulp.dest("./dist/css"));  //另存压缩后的文件，将会在dist/css下面生成index.css
});

//创建另外一个任务用于检查脚本
gulp.task("lint",function(){
  gulp.src("src/js/*.js")
  .pipe(jshint())
  .pipe(jshint.reporter('default'));
});

//创建一个任务用于合并压缩文件
gulp.task("scripts",function(){
  gulp.src("src/js/*.js")
      .pipe(concat('all.js'))//合并之后的文件
      .pipe(rename('all.min.js'))//压缩后的文件
      .pipe(uglify())
      .pipe(gulp.dest("./dist"));
});

//默认任务
gulp.task('default', function(){
    //默认执行的方法，引号内的内容对应上面task写的内容
    gulp.run('lint', 'less', 'scripts');
    // 监听JS文件变化
    gulp.watch('src/js/*.js', function(){
        //运行多个任务
        gulp.run('lint', 'less', 'scripts');
    });
     // 监听less文件变化
    gulp.watch('src/less/*.less', function(){
        gulp.run('lint', 'less', 'scripts');
    });
});

我的项目结构如下：

这里写图片描述

上述完成编写以后就是运行命令进行自动化构建了

//指的就是运行gulpfile.js中配置的default任务，当然也可以单独运行其它的任务，例如gulp lint等等
gulp default

文件改变后，文件不会主动编译问题，需要在控制台输入enter键，移除了default任务中的run方法后改写为如下形式就可以了

//默认任务
gulp.task('default', function(){
    gulp.run('lint', 'less', 'scripts');
    // 监听JS文件变化
    gulp.watch('src/js/*.js',["scripts"]);
     // 监听less文件变化
    gulp.watch('src/less/*.less',["less"]);
});

上面写法和下面写法一样

//默认任务
gulp.task('default', function(){
    gulp.run('lint', 'less', 'scripts');
    // 监听文件变化
    gulp.watch(['src/js/*.js','src/less/*.less'],["scripts","less"]);
});

构建中我遇到的问题：在运行自动话构建过程中失败，报错说是缺少了node-sass，安装不成功，解决方式在如下链接中。https://segmentfault.com/a/1190000010984731

猜你喜欢