JavaScript Gulp

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,src和dest,在项目根目录新建一个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





                


                


                


                

                

            


    
            


                
                
                

                    
                    
FEATURED TAGS

                    

        				
                            
                				
                                    JavaScript
                                
                            
        				
                            
                				
                                    D2
                                
                            
        				
                            
        				
                            
        				
                            
        				
                            
        				
                            
        				
                            
        				
                            
        				
                            
        				
                            
        				
                            
        				
                            
        				
                            
        				
                            
        				
                            
        				
                            
                				
                                    前端