码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2015-11-04 21:08:34      阅读:203      评论:0      收藏:0      [点我收藏+]

标签:

在选择构建工具时,看到更多人推荐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文件书写可以参照下面的栗子:

 1 // 引入 gulp
 2 var gulp = require(‘gulp‘);
 3 
 4 // 引入组件
 5 var sass = require(‘gulp-sass‘);
 6 var minifycss = require(‘gulp-minify-css‘);
 7 var rename = require(‘gulp-rename‘);
 8 var concat = require(‘gulp-concat‘);
 9 var jshint = require(‘gulp-jshint‘);
10 var uglify = require(‘gulp-uglify‘);
11 
12 // 编译Sass
13 gulp.task(‘sass‘, function () {
14     gulp.src(‘./css/*.scss‘)
15         .pipe(sass({
16             includePaths: require(‘node-bourbon‘).includePaths
17         }))
18         .pipe(concat(‘style.min.css‘))
19         .pipe(minifycss())
20         .pipe(gulp.dest(‘./css‘));
21 });
22 
23 // 语法检查
24 gulp.task(‘jshint‘, function() {
25     return gulp.src(‘./js/*.js‘)
26         .pipe(jshint())
27         .pipe(jshint.reporter(‘default‘));
28 });
29 
30 // 合并文件之后压缩代码
31 gulp.task(‘minify‘, function(){
32     gulp.src(‘./js/*.js‘)
33         .pipe(concat(‘all.js‘))
34         .pipe(gulp.dest(‘./js‘))
35         .pipe(uglify())
36         .pipe(rename(‘all.min.js‘))
37         .pipe(gulp.dest(‘./dist‘))
38 });
39 
40 // 默认任务
41 gulp.task(‘default‘, function () {
42     gulp.run(‘sass‘);
43     gulp.run(‘jshint‘);
44     gulp.run(‘minify‘);
45     gulp.watch(‘./css/*.scss‘, function () {
46         gulp.run(‘sass‘);
47     });
48 });

 

五、执行gulp

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

gulp

 

或者执行单个任务

gulp minify

 

OK,大功告成~

参考:

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

标签:

原文地址:http://www.cnblogs.com/youziclub/p/4936993.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!