gulp构建工具的安装

第一步: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)

等等

上一篇:HTML5 坦克大战


下一篇:Ubuntu18.04安装和配置 Java JDK 和 JRE,并卸载自带OpenJDK