对于脚手架工具,我们有很多grunt,gulp,fis,webpack......
这里我说一说gulp对前端页面打包的过程
首先,gulp是基于nodejs环境,故你必须装nodejs。从nodejs官网下载一个,然后配置环境变量即可。如果你要用less或sass预处理语言,请下载ruby并配置环境变量即可。
这里插入 npm的安装命令
npm install <name>安装nodejs的依赖包
例如npm install express 就会默认安装express的最新版本,也可以通过在后面加版本号的方式安装指定版本,如npm install express@3.0.6
npm install <name> -g 将包安装到全局环境中
但是代码中,直接通过require()的方式是没有办法调用全局安装的包的。全局的安装是供命令行使用的,就好像全局安装了vmarket后,就可以在命令行中直接运行vm命令
npm install <name> --save 安装的同时,将信息写入package.json中
项目路径中如果有package.json文件时,直接使用npm install方法就可以根据dependencies配置安装所有的依赖包
这样代码提交到github时,就不用提交node_modules这个文件夹了。
npm init 会引导你创建一个package.json文件,包括名称、版本、作者这些信息等
npm remove <name>移除
npm update <name>更新
npm ls 列出当前安装的了所有包
npm root 查看当前包的安装路径
npm root -g 查看全局的包的安装路径
npm help 帮助,如果要单独查看install命令的帮助,可以使用的npm help install
因为npm是nodejs自带的 所以我们不需要安装,项目开发中 运行npm init 帮你创建一个package.json
环境装好之后,下面我们来安装gulp
第一步,要安装全局的gulp 运行npm install -g gulp --save-dev
第二步,新建一个项目目录 比如: webproject,然后 cd webproject 安装项目的gulp 运行 npm install gulp --save-dev
第三部, 安装压缩html,css,js和语法检查的依赖包,(因为css我是直接写在html,故对less和其他的运用就不在此说明)
var jshint = require('gulp-jshint');//语法检查
var concat = require('gulp-concat');//合并文件
var uglify = require('gulp-uglify');//压缩代码
var rename = require('gulp-rename');//重命名
var htmlmin = require('gulp-htmlmin');//html压缩
npm install <name> --save 其中的name 填写上面的模块名
模块导进来以后,我们来写相应的模块运行代码
// 语法检查
gulp.task('jshint', function () {
return gulp.src('js/*.js')
.pipe(jshint())
.pipe(jshint.reporter('default'));
});
// 合并文件之后压缩代码
gulp.task('minify', function (){
return gulp.src('js/*.js')
.pipe(concat('all.js'))
.pipe(gulp.dest('dist/scripts'))
.pipe(uglify())
.pipe(rename({suffix: '.min'}))
.pipe(gulp.dest('dist/scripts'));
});
//压缩html
gulp.task('html', function() {
return gulp.src('html/*.html')
.pipe(htmlmin(options))
.pipe(gulp.dest('dist/html'))
});
gulp.task('default', ['jshint','minify','html']);
运行gulp 即可