使用gulp构建前端项目
一、 安装Node
- 访问http://nodejs.org，搭建node环境
二、 gulp的安装
首先确保你已经正确安装了nodejs环境。然后以全局方式安装gulp：npm install -g gulp
把目录切换到你的项目文件夹中：cd
在项目文件夹下创建package.json，记得加上{}，保存。（不加{}会导致安装失败。创建package.json文件亦可直接通过npm init命令，该命令会引导你创建一个package.json文件，包括名称、版本、作者这些信息等）
然后在命令行中执行（加上--save-dev，可在安装的时候把gulp写进项目package.json文件的依赖中）：npm install gulp --save-dev
这样就完成了gulp的安装。至于为什么在全局安装gulp后，还需要在项目中本地安装一次，有兴趣的可以看下stackoverflow上有人做出的回答：Why do we need to install gulp globally and locally?、What is the point of double install in gulp?。
三、 安装插件
安装常用插件：
自动加载package.json文件里的gulp插件 （gulp-load-plugins）
sass的编译 （gulp-ruby-sass）
自动添加css前缀 （gulp-autoprefixer）
压缩css （gulp-clean-css）
Html压缩 （gulp-htmlmin）
js代码校验 （gulp-jshint）
合并js文件 （gulp-concat）
压缩js代码 （gulp-uglify）
压缩图片 （gulp-imagemin）
自动刷新页面 （browser-sync）
图片缓存，只有图片替换了才压缩 （gulp-cache）
更改提醒 （gulp-notify）
清除文件 （del）
安装这些插件需要运行如下命令：
npm install gulp-load-plugins gulp-ruby-sass gulp-autoprefixer gulp-clean-css gulp-htmlmin gulp-jshint gulp-concat gulp-uglify gulp-imagemin gulp-notify browser-sync gulp-cache del --save-dev
四、 项目根目录下新建gulpfile.js和 gulp文件夹
文件结构类似于（ tasks文件里存放对应的任务、config.json配置任务的相关配置）
package.json
gulpfile.js
gulp
└──config.json
└──tasks
└── imageTask.js
└── pageTask.js
└── styleTask.js
└── scriptTask.js
src
└──images
└──pages
└──scripts
└──styles
node_modules
build
注：gulpfile.js文件名不可更改
五、 各文件内容
imageTask.js内容：
module.exports = function(gulp, plugin, config, browserSync){ gulp.task('imageTask', function() { return gulp.src(config.imageFile.src).pipe(plugin.cache(plugin.imagemin({ optimizationLevel: 3,// png图片优化水平，3是默认值，取值区间0-7 progressive: true,//是否无损压缩jpg图片 interlaced: true,//是否隔行扫描gif进行渲染 multipass: true //多次优化svg直到完全优化 } ))).pipe(gulp.dest(config.imageFile.dest)).pipe(plugin.notify({ message: 'Images task complete' })).pipe(browserSync.reload({ stream: true })); });};pageTask.js内容：
module.exports = function(gulp, plugin, config, browserSync){ gulp.task('pageTask', function() { gulp.src(config.pageFile.src).pipe(plugin.htmlmin({ collapseWhitespace: true,// 压缩HTML minifyJS: true,// 压缩页面JS minifyCSS: true // 压缩页面CSS } )).pipe(gulp.dest(config.pageFile.dest)).pipe(plugin.notify({ message: 'Pages task complete' })).pipe(browserSync.reload({ stream: true })); });};scriptTask.js内容
module.exports = function(gulp, plugin, config,browserSync){ gulp.task('scriptTask', function() { return gulp.src(config.scriptFile.src) .pipe(plugin.cache(plugin.jshint())) .pipe(plugin.jshint.reporter('default'))// 对代码进行报错提示 // .pipe(plugin.concat('main.js'))//合并后的文件名 .pipe(plugin.uglify()) .pipe(gulp.dest(config.scriptFile.dest)) .pipe(plugin.notify({ message: 'Scripts task complete' })) .pipe(browserSync.reload({stream: true})); });};styleTask.js内容
module.exports = function(gulp, plugin, config, browserSync){ gulp.task('styleTask', function() { return gulp .src(config.styleFile.src) .pipe(plugin.cache(plugin.cleanCss())) .pipe(gulp.dest(config.styleFile.dest)) .pipe(plugin.notify({ message: 'Styles task complete' })) .pipe(browserSync.reload({ stream: true })); });};config.json内容
{ "imageFile" : { "src" : "src/images/ /*.{jpg,png,gif}", "dest" : "build/images" }, "styleFile" : { "src" : "src/styles/ /*.css", "dest" : "build/styles" }, "scriptFile" : { "src" : "src/scripts/ /*.js", "dest" : "build/scripts" }, "pageFile" : { "src" : "src/pages/ /*.html", "dest" : "build/pages" }}gulpfile.js内容：
var gulp = require('gulp'), // 引入gulpconfig = require('./gulp/config.json'), browserSync = require('browser-sync').create(), gulpLoadPlugins = require('gulp-load-plugins')(),gulpTaskList = require('fs').readdirSync('./gulp/tasks/');gulpTaskList.forEach(function(taskfile){ require('./gulp/tasks/' + taskfile)(gulp, gulpLoadPlugins, config, browserSync);});gulp.task('serve', ['styleTask', 'scriptTask', 'imageTask', 'pageTask'], function(){ browserSync.init({ files: "build/ /*.*", proxy: "localhost:3000/build/pages/index.html" });});gulp.task('watch', ['serve'], function(){ // 检测文件发送变化 gulp.watch(config.pageFile.src, ["pageTask"]); gulp.watch(config.styleFile.src, ["styleTask"]); gulp.watch(config.scriptFile.src, ["scriptTask"]); gulp.watch(config.imageFile.src, ["imageTask"]);});// default 默认任务，依赖清空任务gulp.task('default', ['watch']);关键字：gulp, node.js
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！