使用gulp构建前端项目

一、 安装Node

  1. 访问http://nodejs.org,搭建node环境

二、 gulp的安装

  1. 首先确保你已经正确安装了nodejs环境。然后以全局方式安装gulp:npm install -g gulp

  2. 把目录切换到你的项目文件夹中:cd

  3. 在项目文件夹下创建package.json,记得加上{},保存。(不加{}会导致安装失败。创建package.json文件亦可直接通过npm init命令,该命令会引导你创建一个package.json文件,包括名称、版本、作者这些信息等)

  4. 然后在命令行中执行(加上--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?。

三、 安装插件

  1. 安装常用插件:

  2. 自动加载package.json文件里的gulp插件 (gulp-load-plugins)

  3. sass的编译 (gulp-ruby-sass)

  4. 自动添加css前缀 (gulp-autoprefixer)

  5. 压缩css (gulp-clean-css)

  6. Html压缩 (gulp-htmlmin)

  7. js代码校验 (gulp-jshint)

  8. 合并js文件 (gulp-concat)

  9. 压缩js代码 (gulp-uglify)

  10. 压缩图片 (gulp-imagemin)

  11. 自动刷新页面 (browser-sync)

  12. 图片缓存,只有图片替换了才压缩 (gulp-cache)

  13. 更改提醒 (gulp-notify)

  14. 清除文件 (del)

  15. 安装这些插件需要运行如下命令:
    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文件夹

  1. 文件结构类似于( tasks文件里存放对应的任务、config.json配置任务的相关配置)

  2. package.json

  3. gulpfile.js

  4. gulp

  5. └──config.json

  6. └──tasks

└── imageTask.js

  1. └── pageTask.js

  2. └── styleTask.js

  3. └── scriptTask.js

  4. src

  5. └──images

  6. └──pages

  7. └──scripts

  8. └──styles

  9. node_modules

  10. 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

版权声明

本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符,请点击 举报 进行投诉反馈!

立即
投稿

微信公众账号

微信扫一扫加关注

返回
顶部