gulp构建工具的安装

时间：2023-03-08 19:31:25

第一步：node.js安装

在gulp安装之前，本机需要node环境。访问http://nodejs.org，然后点击大大的绿色的install按钮，下载完成后直接运行程序。npm会随着安装包一起安装，稍后会用到它。

为了确保node.js和npm已安装，请在命令行中输入以下命令:

node -v
npm -v

这两个命令，用于显示node或npm的版本。确定这两个安装后，可进行下一步

第二步： gulp 安装

  1. 安装全局的gulp

    npm install -g gulp
    • 如果ios安装不上，请在命令请加sudo
    • npm install是安装包的意思
    • -g 全局安装

  2. 安装项目的gulp

    进入项目的目录后，开始安装项目的gulp。

    npm install --save-dev gulp

    使用--save-dev来更新package.json文件，更新devDependencies值，以表明项目需要依赖gulp

第三步 npm init 生成package.json文件

在安装的过程中如果报找不到package.json，用npm init命令在该项目的目录中生成package.json文件

第四步 安装gulp组件

先看一下，我们的项目目录：

gulp构建工具的安装

我们任务是将src目录上的js文件和less文件生成的build目录下，以便使用。

要完成的任务有：

  • js检查
  • less 编译
  • js,css文件压缩合并
  • 清空build目录下的文件
  • 图片压缩
npm install gulp-less gulp-minify-css gulp-jshint  gulp-uglify gulp-imagemin gulp-rename  gulp-concat  gulp-clean  --save-dev

gulp-less less 编译

gulp-minify-css css压缩

gulp-jshint js检查

gulp-uglify js压缩

gulp-imagemin 图片压缩

gulp-rename 重命名

gulp-concat 文件合并

gulp-clean 清空文件夹

第五步 编写gulpfile.js

gulp通过gulpfile文件来完成相关任务，因此项目中必须包含gulpfile.js

gulp有五个方法：src、dest、task、run、watch

src和dest：指定源文件和处理后文件的路径

watch：用来监听文件的变化

task：指定任务

run：执行任务

// 引入 gulp及组件

var gulp    = require('gulp'),                 //基础库

    less = require('gulp-less'),               //less

    minifycss = require('gulp-minify-css'),    //css压缩

    jshint = require('gulp-jshint'),           //js检查

    uglify  = require('gulp-uglify'),          //js压缩

    imagemin = require('gulp-imagemin'),       //图片压缩

    rename = require('gulp-rename'),           //重命名

    concat  = require('gulp-concat'),          //合并文件

    clean = require('gulp-clean');             //清空文件夹

// 样式处理

gulp.task('css', function () {

    var cssSrc = './src/less/*.less',

        cssDst = './build/css';

    gulp.src(cssSrc)

        .pipe(less())

        .pipe(gulp.dest(cssDst))

        .pipe(rename({ suffix: '.min' }))

        .pipe(minifycss())

        .pipe(gulp.dest(cssDst));

});

// 图片处理

gulp.task('images', function(){

    var imgSrc = './src/images/**/*',

        imgDst = './build/images';

    gulp.src(imgSrc)

        .pipe(imagemin())

        .pipe(gulp.dest(imgDst));

})

// js处理

gulp.task('js', function () {

    var jsSrc = './src/js/*.js',

        jsDst ='./build/js';

    gulp.src(jsSrc)

        .pipe(jshint())

        .pipe(jshint.reporter('default'))

        .pipe(concat('main.js'))

        .pipe(gulp.dest(jsDst))

        .pipe(rename({ suffix: '.min' }))

        .pipe(uglify())

        .pipe(gulp.dest(jsDst));

});

// 清空图片、样式、js

gulp.task('clean', function() {

    gulp.src(['./build/css', './build/js', './build/images'], {read: false})

        .pipe(clean());

});

// 默认任务 清空图片、样式、js并重建 运行语句 gulp

gulp.task('default', ['clean'], function(){

    gulp.start('css','images','js');

    // gulp.watch('./build/js/*.js', function(){

    //     gulp.run('css', 'images', 'js');

    // });

});

gulp安装过程中可能遇到的问题

如果安装过程中报这个错误 "Error: Cannot find module 'jshint/src/cli'"

gulp构建工具的安装

原因是命令不对，用：

```

npm install --save-dev jshint gulp-jshint

```

来代替

```

 npm install gulp-jshint --save-dev

```

结束语

有一些参考资源供进一步学习：

1. npm上得gulp组件

2. gulp的Github主页

3. 官方package.json文档

为了实现更多的功能，大家可以多去了解一下node模块及gulp另一些功能

1. 为gulp增加watch功能，会自动编译文件

2. 为gulp增加serve功能，启动gulp的服务器

3. html文件里引用一些html片段:gulp-file-include模块

4. browser-sync模块，浏览器自动刷新（有个bug，html文件超过48个就执行不了gulp-file-include)

等等

相关文章