mac gulp 前端构建工具入门篇

最新推荐文章于 2024-05-22 23:14:51 发布

-树静风停

最新推荐文章于 2024-05-22 23:14:51 发布

阅读量618

点赞数

分类专栏：前端自动化工具文章标签： gulp gulp热更新 javascript

本文链接：https://blog.csdn.net/chen0o0/article/details/82699270

版权

前端自动化工具专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文介绍了mac上使用gulp作为前端构建工具的基础知识，包括gulp的特点、安装步骤、配置文件的创建以及项目目录的设定。通过gulp，开发者可以便捷地处理js、css、html等文件，实现文件的监听、压缩和合并。此外，文章还提及了项目中可能用到的shell命令，强调gulp在前端开发中的全方位服务角色，易于上手且插件丰富。

摘要由CSDN通过智能技术生成

一、gulp特点

首先gulp 是一个工具，可以，检测，压缩，合并，监听js，css,html等文件，主要用到node中fileStytem与streem的两个模块，对文件进行修改、删除、创建和读取，利用pipe管道处理对象流的输入与输出，源于流的操作，所以整个过程安全、快速、性能提升

二、安装

1、安装node 可以参考官网 https://nodejs.org/en/
2、安装gulp sudo install gulp -g (全局安装)
3、cd到项目路径，并新建package.json文件,内容如下（）,sudo install

{
  "name": "app",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "node ./bin/www"
  },
  "dependencies": {
    "body-parser": "~1.18.2",
    "cookie-parser": "~1.4.3",
    "debug": "~2.6.9",
    "ejs": "^2.6.1",
    "express": "~4.15.5",
    "jade": "~1.11.0",
    "morgan": "~1.9.0",
    "serve-favicon": "^2.4.5"
  },
  "devDependencies": {
    "clean": "^4.0.2",
    "gulp": "^3.9.1",
    "gulp-clean": "^0.4.0",
    "gulp-clean-css": "^3.10.0",
    "gulp-concat": "^2.6.1",
    "gulp-connect": "^5.6.1",
    "gulp-cssmin": "^0.2.0",
    "gulp-htmlmin": "^5.0.1",
    "gulp-livereload": "^4.0.0",
    "gulp-load-plugins": "^1.5.0",
    "gulp-open": "^3.0.1",
    "gulp-rename": "^1.4.0",
    "gulp-sequence": "^1.0.0",
    "gulp-uglify": "^3.0.1",
    "gulp-useref": "^3.1.5"
  }
}

4、插件安装 sudo install --save-dev gulp-connect空格gulp-cssmin...
5、新建配置文件gulpfile.js，代码如下

var gulp = require('gulp');
//加载gulp-load-plugins插件，并马上运行它
var plugins = require('gulp-load-plugins')();

//按顺序执行gulp 任务
var gulpSequence = require('gulp-sequence')
var app={
	//源码地址
	srcPath:{
		html:'src/**/*.html',
		js:'src/js/**/*.js',
		css:'src/css/**/*.css'
	},
	staticPath:{
		css:'public/stylesheets/',
		js:'public/javascripts/'
	},
	//开发地址
	developPath:'views/',

};


//处理html
gulp.task('testHtmlmin', function () {
	gulp.src(app.developPath+'*.html')
        .pipe(plugins.clean());
    var options = {
        removeComments: true,//清除HTML注释
        collapseWhitespace: true,//压缩HTML
        collapseBooleanAttributes: true,//省略布尔属性的值 <input checked="true"/> ==> <input />
        removeEmptyAttributes: true,//删除所有空格作属性值 <input id="" /> ==> <input />
        removeScriptTypeAttributes: true,//删除<script>的type="text/javascript"
        removeStyleLinkTypeAttributes: true,//删除<style>和<link>的type="text/css"
        minifyJS: true,//压缩页面JS
        minifyCSS: true//压缩页面CSS
    };
    gulp.src(app.srcPath.html)
        
        .pipe(plugins.htmlmin(options))
        .pipe(gulp.dest(app.developPath))
       // .pipe(plugins.useref())
        .pipe(plugins.connect.reload());
});

//压缩合并js
gulp.task('js',function(){
	 gulp.src(app.staticPath.js+'*.js')
        .pipe(plugins.clean());
    gulp.src(app.srcPath.js)
    	.pipe(gulp.dest(app.staticPath.js))
        .pipe(plugins.concat('all.js')) 
   		.pipe(plugins.uglify())
        .pipe(gulp.dest(app.staticPath.js))
        
        .pipe(plugins.connect.reload());
});



//压缩合并css
gulp.task('css',function(){
    gulp.src(app.staticPath.css+'*.css')
        .pipe(plugins.clean());
    gulp.src(app.srcPath.css)
    	.pipe(plugins.cleanCss())
        .pipe(gulp.dest(app.staticPath.css))
        .pipe(plugins.connect.reload());
});

gulp.task('s',function(){
	console.log('====================');
	gulp.src(app.developPath+'*.html')
	.pipe(plugins.useref())
	.pipe(plugins.connect.reload());
});


//清除文件夹及文件
gulp.task('clean', function(){
	console.log('---------------------------------------------------------------------------------');
    gulp.src([app.developPath+'*.html',app.staticPath.js+'*.js',app.staticPath.css+'*.css'])
        .pipe(plugins.clean());
});

gulp.task('bulid',gulpSequence(['js','css'],'testHtmlmin'));

gulp.task('server',['bulid'],function(){

	plugins.connect.server({
        root:[app.developPath],
        livereload:true,
        port:3000
    });
   plugins.open('http://localhost:3000');
	gulp.watch(app.srcPath.html,['testHtmlmin']);
	gulp.watch(app.srcPath.js,['js']);
	gulp.watch(app.srcPath.css,['css']);
})


gulp.task('default',['server']);

三、基本使用
针对gulp的特点，我们可以制定不同的task，以下是我的项目目录

四、此项目用到的一些shell命令

$ npm start & gulp default   //启动服务

$ ctr+C                      //通用退出 ，用于（node ，gulp）启动的服务

$ ps -ef| grep node          //查找node进程  

$ kill 进程号                 //杀进程，强制退出

$ lsof -i:3000               //查下端口：3000的进程

$ kill 进程号                 //杀进程，强制退出

五、总结
gulp给前端开发带来了不仅只有解放双手的便利，它是一个整体服务，从编码到检测，再到压缩及上线，插件功能非常全面，而且体积小，上手快，面向所有开发人员，教程看的再多，也不如动手一行代码！以上代码是刚学的入门，node.js+express+gulp+热更新，测试代码可用