学习笔记：基于gulp的前端自动化工程搭建——1

对前端自动化工程很感兴趣，所以学习参考各种教程想使用gulp搭建一个自动化开发环境，对于gulp也只是入门，此篇博客只是记录自己搭建的过程，方便以后回顾

1安装了gulp后创建文件夹gulpproject进入文件夹后执行命令：

npm init

创建项目的 package.json 文件
学习笔记：基于gulp的前端自动化工程搭建——1
2手动创建gulpfile.js文件并输入代码检查gulp是否能成功运行

在命令行输入gulp后回车可以看到成功打印

可以看到gulp可以正常运行

3压缩html文件：
压缩html文件需要在命令行执行：

npm install gulp-htmlmin --save-dev

安装模块成功后就可以在gulpfile.js文件中创建gulp.task任务压缩html文件；
在项目目录中我的结构是这样的；
学习笔记：基于gulp的前端自动化工程搭建——1
src是源文件dest目录是存放压缩后的文件
gulpfile.js文件中引入模块并压缩任务:

var htmlmin = require('gulp-htmlmin');

//压缩html
gulp.task('html',function(){
     var options = {
        collapseWhitespace:true, //压缩HTML
        collapseBooleanAttributes:true, //省略布尔属性的值 
        removeComments:true, //清除HTML注释
        removeEmptyAttributes:true, //删除所有空格作属性值
        removeScriptTypeAttributes:true, //删除<script>的type="text/javascript"
        removeStyleLinkTypeAttributes:true, //删除<style>和<link>的type="text/css"
        minifyJS:true, //压缩页面JS
        minifyCSS:true //压缩页面CSS   
    };
    gulp.src('src/*.html')  //找到src文件下的html文件
           .pipe(htmlmin(options))  //压缩
           .pipe(gulp.dest('dest/')); //压缩后的文件存放到dest文件夹下  
});

在命令行中执行命令：

gulp html

可以完成html文件的压缩

4压缩css文件：

与压缩html文件一样，压缩css文件也需要安装相应的模块，命令行中执行：

npm install gulp-minify-css --save-dev

在gulpfile.js中引入模块并编写压缩任务：

var cssmin = require('gulp-minify-css')

//压缩css
gulp.task('css',function(){
	gulp.src('src/css/*.css')  //找到对应位置的文件
	.pipe(cssmin())
	.pipe(gulp.dest('dest/css'))  //压缩后输出到对应位置
})

在命令行中执行

gulp css

就可以完成css文件的编译

5压缩js文件
首先安装压缩js文件需要用到的模块

npm install gulp-uglify --save-dev

在gulpfile.js文件中引入模块并创建压缩任务

var jsmin = require('gulp-uglify')

//压缩js
gulp.task('js',function(){
	gulp.src('src/js/*.js') //找到对应位置的文件
	.pipe(jsmin())
	.pipe(gulp.dest('dest/js')) //压缩后输出到对应位置
})

在命令行中执行：

gulp js

6压缩图片文件：
同样安装模块：

npm install gulp-imagemin --save-dev

在gulpfile.js文件中引入模块并创建压缩任务

var imgmin = require('gulp-imagemin');

//压缩图片
gulp.task('img',function(){
	gulp.src('src/images/*.*')
	.pipe(imgmin())
	.pipe(gulp.dest('dest/images'))
})

在命令行中

 gulp img

7css预处理sass
安装模块：

npm install gulp-sass --save-dev

gulpfile.js中引入模块：

var sassfeil = require('gulp-sass');  //css预处理

添加预处理的task任务：

//css预处理
gulp.task('sass',function(){
	gulp.src('src/scss/*.scss')
	.pipe(sassfeil())
	.pipe(gulp.dest('dest/css'))
	.pipe(browsersync.reload({stream:true})) 
})

8gulp执行所有任务
在文章开头的

gulp.task('default',function(){
	console.log('gulp启动成功');
});
这个任务是gulp默认执行任务
我们将需要执行的任务名称以数组的形式传入这个默认任务后，只需要命令行直接输入gulp命令，则可以执行所有的任务
方法改写为：

gulp.task('default',['html','css','js','img']);

这里的任务名对应gulp.task中各个任务的任务名称

执行结果如下图

学习笔记：基于gulp的前端自动化工程搭建——1
9监听所有文件改动，自动执行任务

上面执行任务的方式可以升级一下
可以使用watch监听文件的改动，要监听多个问文的改动，可以将所有监听放在一个任务里面；

//监听所有文件的改动
gulp.task('watch',function(){
	gulp.watch('src/*.html',['html'])
	gulp.watch('src/css/*.css',['css'])
	gulp.watch('src/js/*.js',['js'])
	gulp.watch('src/images/*.*',['img'])
	gulp.watch('src/scss/*.scss',['sass'])
})

之后在默认任务里添加watch任务

gulp.task('default',['html','css','js','img','watch']);

这时只需要执行gulp命令就可以完成压缩任务并监听文件的改动

10实现监听文件改动自动压缩浏览器实时刷新

再升级一下实现更方便的功能
需要安装browser-sync模块
在项目目录下执行命令：

npm install browser-sync --save-dev

在gulpfile.js文件中引入模块：

var browsersync = require('browser-sync'); //浏览器实时刷新

之后在压缩html、css、js、img的任务下面加上一条命令：

.pipe(browsersync.reload({stream:true}))

就像这样：
学习笔记：基于gulp的前端自动化工程搭建——1
之后再添加gulp的task任务并将监听文件改动的命令放在这个任务里面，之前的监听任务可以注释掉：

gulp.task('browserSync', function() {
  browsersync({
    server: {
      baseDir: 'dest'
    },
  })
  gulp.watch('src/*.html',['html'])
  gulp.watch('src/css/*.css',['css'])
  gulp.watch('src/js/*.js',['js'])
  gulp.watch('src/images/*.*',['img'])
// })
})

然后在默认事件里面执行这个任务：

gulp.task('default',['browserSync'])

//gulp.task('default',['html','css','js','img','watch','browserSync']);

学习笔记：基于gulp的前端自动化工程搭建——1
这样命令行直接执行gulp命令就可以实现源文件改动，会自动压缩到目标目录，并刷新浏览器

这里需要注意的是，自动刷新监听的目录是生成目录，不是源文件目录，所以src源文件中引入css问件还是按照dest文件中路径文件名引入，编译后会正常显示

到这里完成了最基本的压缩任务，还将继续完善，继续学习，继续补充

学习笔记：基于gulp的前端自动化工程搭建——1

相关推荐