前端构建工具之gulp的安装和配置

时间：2024-06-21 11:34:32

在选择构建工具时，看到更多人推荐gulp，从此入了gulp的坑～

一、安装node环境

百度谷歌一下就有了，在终端中分别输入 node -v 和 npm -v，若显示node和npm的版本号则说明node环境装好了。

二、安装gulp

linux下安装全局环境：

sudo npm install -g gulp

或cd进入项目目录下安装gulp到项目本地：

npm install gulp --save-dev

--save-dev的意思是将安装的gulp版本信息写入package.json,更新devDependencies值，以表明项目需要依赖gulp；在项目迁移时，执行npm install即可安装项目环境。

三、安装依赖文件

  • 检查javascript（gulp-jshint）
  • 编译sass/less文件（gulp-sass / gulp-less）
  • sass/less混入库（node-bourbon / lesshat）
  • 压缩css文件（gulp-minify-css）
  • 合并文件（gulp-concat）
  • 压缩js文件（gulp-uglify）
  • 重命名文件（gulp-rename）
  • ...

举个栗子：

npm install gulp-jshint gulp-sass gulp-concat node-bourbon --save-dev

四、新建gulpfile.js文件

gulp只有五个方法：task、run、watch、src、和dest。gulpfile文件书写可以参照下面的栗子：

 // 引入 gulp

 var gulp = require('gulp');

 // 引入组件

 var sass = require('gulp-sass');

 var minifycss = require('gulp-minify-css');

 var rename = require('gulp-rename');

 var concat = require('gulp-concat');

 var jshint = require('gulp-jshint');

 var uglify = require('gulp-uglify');

 // 编译Sass

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

     gulp.src('./css/*.scss')

         .pipe(sass({

             includePaths: require('node-bourbon').includePaths

         }))

         .pipe(concat('style.min.css'))

         .pipe(minifycss())

         .pipe(gulp.dest('./css'));

 });

 // 语法检查

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

     return gulp.src('./js/*.js')

         .pipe(jshint())

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

 });

 // 合并文件之后压缩代码

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

     gulp.src('./js/*.js')

         .pipe(concat('all.js'))

         .pipe(gulp.dest('./js'))

         .pipe(uglify())

         .pipe(rename('all.min.js'))

         .pipe(gulp.dest('./dist'))

 });

 // 默认任务

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

     gulp.run('sass');

     gulp.run('jshint');

     gulp.run('minify');

     gulp.watch('./css/*.scss', function () {

         gulp.run('sass');

     });

 });

五、执行gulp

在终端执行下面的命令执行所有的任务

gulp

或者执行单个任务

gulp minify

OK,大功告成～

参考:

相关文章