Gulp的简单配置

Posted by 生活的日常 on October 29, 2014

###第一步安装node### 首先,也是最基本的,我们需要搭建node环境。访问nodejs.org,然后点击大大的install按钮,就可以下载安装了。 ###第二步安装Gulp### 在安装node之后,我们开始使用命令行安装Gulp,在命令行总输入

sudo npm install -g gulp
    1. sodo 是以管理员的身份执行命令,一般会要求输入电脑密码。
    2. npm 是安装node模块的工具,执行install命令
    3. -g 表示在全局环境安装,以便任何项目都能使用它
    4. 最后Gulp是将要安装的node模块的名字

运行时注意查看命令行是否有出错的信息,安装完成后,你可以使用下面的命令查看gulp的版本号以确保gulp已经被正确安装

gulp -v

接下来,我们需要将gulp安装到项目本地

npm install gulp --save-dev

ps:如果失败,尝试下前面加上 sudo,这里我们使用--save-dev来更新package.json文件,更新devDependencies值,以表明项目需要依赖gulp. ###第三步新建Gulpfile文件,运行Gulp###

安装好Gulp之后我们需要告诉它要为我们执行哪些任务,首先我们要清楚的知道项目需要哪些任务,自己都不清楚,代码怎么会知道呢,不要像PM一样,自己都不知道项目要做哪些功能.

  • 检查Javascript
  • 编译sass或者less之类的预处理文件
  • 合并javascript
  • 压缩并重命名合并后的javascript

####安装依赖####

npm install gulp-jshint gulp-sass gulp-concat gulp-uglify gulp-rename --save-dev

提醒下,如果以上命令提示权限错误,需要加上sudo再次尝试

####新建gulpfile文件####

现在组件都安装完毕,我们需要新建gulpfile文件以指定gulp需要为我们完成什么任务。

gulp只有5个方法:task,run,watch,srcdest,在项目根目录新建一个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
gulp.task('sass', function() {
    gulp.src('./scss/*.scss')
        .pipe(sass())
        .pipe(gulp.dest('./css'));
});

// 合并,压缩文件
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'));
});

// 默认任务
gulp.task('default', function(){
    gulp.run('lint', 'sass', 'scripts');

// 监听文件变化
ulp.watch('./js/*.js', function(){
   gulp.run('lint', 'sass', 'scripts');
});
});

现在,分段解释下这段代码


####引入组件####

var gulp = require('gulp);

var jshint = require('gulp-jshint);
va sass = require('gulp-sass');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename'); 

这一步,我们引入了核心的gulp和其他依赖插件,接下来,分开创建hint,sass,scripts和default这四个不同的任务。 ####Lint任务####

gulp.task('lint',function() {
	gulp.src('./js/*.js')
	.pipe(jshint())
	.pipe(jshint.reporter('default'));
});

lint任务会检查js/目录下js文件有没有报错或者警告。 ####sass任务####

gulp.task('sass', function() {
	gulp.src('./sass/*.sass')
	.pipe(sass())
	.pipe(gulp.dest('./css'));
});

Sass任务会编辑sass/目录下的sass文件,并把编译完成的css文件保存到css目录中。 ####scripts任务####

gulp.tasl('scripts', function() {
	gulp.src('./js/*.js')
	.pipe(concat('all.js'))
	.pipe(gulp.dest('./dest'))
	.pipe(rename('all.min.js'))
	.pipe(uglify())
	.pipe(gulp.dest('./dist'));
});

scripts任务会合并js/目录下所有的js文件并输出到dist/目录,然后gulp会重新命名,压缩合并文件,输出到dist/目录。 ####default任务####

gulp.task('default', function() {
	gulp.run('lint','sass','scripts');
	gulp.watch('./js/*.js', function() {
		gulp.run('lint','sass','scripts');
	});
});

这时,我们创建了一个基于其他任务的default任务。使用.run方法关联和运行我们上面定义的任务,使用.watch()方法去监听指定目录的文件变化,当有文件变化时,会运行回调定义其他任务。 现在,回到命令行,可以直接运行gulp任务了。

gulp

这将执行定义的default任务,换言之,这个一下的命令方式同一个意思

gulp default

当然,我们也可以在gulpfile.js中定义的任意任务,比如,现在运行sass任务:

gulp sass