转载gulp入门使用

时间：2019-5-30    作者：悬浮的青春    分类： 其他

1.安装node.js  下载地址： http://nodejs.cn/

   打开node.js 命令行，输入： node  -v ，有版本号，则正确安装。

2.安装淘宝镜像 ：命令行输入 ： 

npm install -g cnpm --registry=http://registry.npm.taobao.org  目的：使下在速度更快。
3.全局安装gulp 
cnpm install --global gulp
4.创建目录，打开F盘，创建gulp文件夹。命令行输入 ：
f:
cd gulp
5.安装本地gulp
cnpm install --save-dev gulp
6.创建package.json文件
cnpm init 
一路enter确定就行
7.web编辑器打开此gulp目录，如hbuilder、webstorm。在gulp目录下创建gulpfile.js文件，gulp运行的入口

8.确定何种打包压缩，html、js、css、img
9.js打包
1
2
3
4
5
6
7
8
9
10
var gulp = require('gulp');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
 
gulp.task('default',function(){   
    gulp.src('js/*.js')       // 路径问题：gulpfile.js为路径的起点。此路径表示js文件下的所有js文件。
    .pipe(concat('all.js'))   //合并成的js文件名称
    .pipe(uglify())            //压缩
    .pipe(gulp.dest('build'));    //打包压缩在build目录下。
});

10.运行；node.js输入

          gulp

          会有报错，提示 gulp-concat组件没有安装。开始安装 ：cnpm install gulp-concat --save-dev

再次运行 ：gulp

再次报错，提示gulp-uglify组件没有安装。开始安装 ：cnpm install gulp-uglify --save-dev

再次运行 ：gulp

。。。。。。。。。。。。。。。

       成功之后会

这里会看到 finished ‘default’ ，‘default’ 就是gulp.task任务开始的默认入口。如果创建多个task任务，且修改任务名称如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
var gulp = require('gulp');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
 
gulp.task('default',function(){   
    gulp.src('js/*.js')       // 路径问题：gulpfile.js为路径的起点。此路径表示js文件下的所有js文件。
    .pipe(concat('all.js'))   //合并成的js文件名称
    .pipe(uglify())            //压缩
    .pipe(gulp.dest('build'));    //打包压缩在build目录下。
})
 
//css 打包压缩
var autoprefix = require('gulp-autoprefixer');
var minifyCSS = require('gulp-minify-css');
 
gulp.task('style', function() {    //task 任务名称为style
 
gulp.src('.css/*.css')
 
.pipe(concat('styles.css'))
 
.pipe(autoprefix('last 2 versions'))
 
.pipe(minifyCSS())
 
.pipe(gulp.dest('styles'));
 
});



     重新运行 ： gulp

    结果： 

会发现只运行了 default的task任务。因为这是唯一默认的gulp执行入口。修改如下
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
var gulp = require('gulp');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
 
gulp.task('js',function(){   
    gulp.src('js/*.js')       // 路径问题：gulpfile.js为路径的起点。此路径表示js文件下的所有js文件。
    .pipe(concat('all.js'))   //合并成的js文件名称
    .pipe(uglify())            //压缩
    .pipe(gulp.dest('build'));    //打包压缩在build目录下。
})
 
//css 打包压缩
var autoprefix = require('gulp-autoprefixer');
var minifyCSS = require('gulp-minify-css');
 
gulp.task('style', function() {    //task 任务名称为style
 
gulp.src('.css/*.css')
 
.pipe(concat('styles.css'))
 
.pipe(autoprefix('last 2 versions'))
 
.pipe(minifyCSS())
 
.pipe(gulp.dest('styles'));
 
});
1
2
3
<br>gulp.task('default',function(){
    gulp.run(['js','style']);   //这里开始执行多个task任务
});

如果遇到什么组件没有安装的话，想你应该知道怎么操作了。

11.图片压缩

1
2
3
4
5
6
var imagemin = require('gulp-imagemin');
gulp.task('img', function() {
  return gulp.src('imgs/*.png')
    .pipe(imagemin())
    .pipe(gulp.dest('miniImg'));
});

12.html压缩

1
2
3
4
5
6
var htmlmin = require('gulp-htmlmin');
gulp.task('html', function() {
  return gulp.src('../*.html')
    .pipe(htmlmin({collapseWhitespace: true}))
    .pipe(gulp.dest('../'));
});

13.路径问题自己修改

14.只能说入个门，还有更多的功能。多看高人博客吧或官网。
 


                
标签:	jQuery

				


  
WRITTEN BY

  avatar
  
    



                
				        

            

                
                

                    

                

                    
                    
					                        

                            
                            
                            
                        

					                    

                        
                    

					                        
                        
                        
					                    
                

            

        

						    
            

        

		

	    

        

            
热门文章

        

        
    

    

        

            
日历

        

        
    
            
    
            
        

    

    

        

            
最新评论

        

        

        
    

    

        

            
链接