[gulp] - 前端构建工具gulp的安装与使用

简单学习一下gulp的使用。

一、安装

1、安装node

安装地址：https://nodejs.org/en/ (npm也会安装成功，npm是node包管理工具)

2、命令行

node -v
npm -v
若能出现版本号，表明安装成功；否则需要重装

3、常见命令 （Linux命令）

cd 目录切换
ls 显示文件列表
利用cd切换到项目目录下

4、安装gulp

sudo npm install -g gulp
解释：sudo--管理员身份执行命令；
npm install--安装；
-g --全局环境的安装，任何项目均可使用；
gulp --安装node模块的名称
gulp -v 是否安装成功
npm install —-save-dev gulp 将gulp安装到项目本地

5、安装依赖

npm install gulp-jshint gulp-sass gulp-concat gulp-uglify gulp-rename --save-dev 安装依赖
若没有权限，使用sudo试试

二、新建Gulpfile文件

在项目根目录新建一个js文件并命名为 gulpfile.js
加入下面代码：
// 引入 gulp
var gulp = require('gulp');
// 引入组件
var jshint = require('gulp-jshint'); var sass = require('gulp-sass'); var concat = require('gulp-concat'); var uglify = require('gulp-uglify'); var rename = require('gulp-rename');
// 检查脚本
gulp.task('lint', function() { gulp.src('./js/*.js') .pipe(jshint()) .pipe(jshint.reporter('default')); });
// 编译Sass
//编译 scss/ 目录下的scss文件，并把编译完成的css文件保存到 /css 目录中。
gulp.task('sass', function() { gulp.src('./scss/*.scss') .pipe(sass()) .pipe(gulp.dest('./css')); });
// 合并，压缩文件
//scripts任务会合并 js/ 目录下得所有得js文件并输出到 dist/ 目录，然后gulp会重命名、压缩合并的文件，也输出到 dist/ 目录。
gulp.task('scripts', function() { gulp.src('./js/*.js') .pipe(concat('all.js')) .pipe(gulp.dest('./dist')) .pipe(rename('all.min.js')) .pipe(uglify()) .pipe(gulp.dest('./dist')); });
// 默认任务
//创建了一个基于其他任务的default任务。使用 .run() 方法关联和运行我们上面定义的任务，使用 .watch() 方法去监听指定目录的文件变化，当有文件变化时，会运行回调定义的其他任务。
gulp.task('default', function(){ gulp.run('lint', 'sass', 'scripts'); // 监听文件变化 gulp.watch('./js/*.js', function(){ gulp.run('lint', 'sass', 'scripts'); }); });

三、运行gulp

gulp 或者 gulp default 运行