npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

h5-templete

v0.0.1

Published

基于gulp的自动化开发工具

Downloads

17

Readme

使用gulp快速开发前端项目

项目需配置 node.js + npm 环境

使用gulp自动实现

  • 图片压缩
  • css代码自动添加浏览器厂商前缀,代码压缩
  • js代码检测、压缩
  • 代码热更新
  • 创建本地小型服务器,可以方便的在手机上调试

1. 项目文件目录

app/---------------------------- 项目源文件
	    css/
	    images/
	    js/
	    index.html
dist/----------------------------  经过gulp处理后的文件
gulpfile.js----------------------  gulp配置文件
package.json---------------------  开发依赖文件

2. 安装开发依赖

cnpm install

3.配置gulp文件

3.1 引入文件,参考common.js规范

var gulp = require('gulp');
var del = require('del');
var browserSync = require('browser-sync').create();  // 静态服务器
var reload = browserSync.reload;
var watch = require('gulp-watch');
var gulpScss = require('gulp-sass');   // 编译sass文件
var imagemin = require('gulp-imagemin');
var $ = require('gulp-load-plugins')();

3.2 配置gulp任务

3.2.1 图片压缩,压缩等级为3级,总共0-7级,参考imagemin配置

gulp.task('image', function() {
    return gulp.src('app/images/**/*')------------------------------文件入口
        .pipe($.cache(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true })))
        .pipe(gulp.dest('dist/images'));----------------------------文件出口,即压缩后的文件的存放路径
});

3.2.2 css压缩,自动添加前缀

gulp.task('css', function () {
   gulp.src('app/css/**/*')
       .pipe($.autoprefixer())
       .pipe($.minifyCss())
       .pipe(gulp.dest('dist/css'));
});

3.2.3 js压缩,检测

gulp.task('js', function () {-----------------------------压缩
    gulp.src(['app/js/**/*.js'])
        .pipe($.jshint.reporter('default'))
        .pipe($.uglify())
        .pipe(gulp.dest('dist/js'))
});
gulp.task('lint', function () {---------------------------检测
    gulp.src('gulpfile.js')
        .pipe($.jshint())
        .pipe($.jshint.reporter('default'));
});

3.2.4 复制html

gulp.task('html', function () {
   gulp.src('app/**/*.html')
       .pipe(gulp.dest('dist/'))
});

3.2.5 自动刷新

gulp.task('serve', function () {
    browserSync.init({
        server:{baseDir:'./app'},
        browser:'chrome'
    });
});

3.2.6 watch监控

gulp.task('watch', function () {
    gulp.watch(['app/**/*'],reload);
});

3.2.7 css,js重命名

gulp.task('rename', function () {
   gulp.src(['!dist/**/*min.js','!dist/**/*min.css','dist/**/*.css','dist/**/*.js'])
       .pipe($.rename({suffix:'.min'}))
       .pipe(gulp.dest('dist/'));
});

3.2.8 scss编译,监控

// 编译scss文件
gulp.task('scss-compile', function () {
    gulp.src('app/css/**/*.scss')
        .pipe(gulpScss().on('error',gulpScss.logError))
        .pipe(gulp.dest('app/css'));
});
// 监控scss文件变化
gulp.task('scss-watch', function () {
    gulp.watch('app/**/*.scss',['scss-compile']);
});

clean

gulp.task('clean', function (cb) {
   del(['dist/**/*'],cb);
});

4. 配置默认任务

gulp.task('default',['image','js','scss-compile','css','serve','watch']);

如何使用?

gulp -------------------------启动默认任务default

单独启动某一个任务

gulp image---------------------压缩图片
gulp js------------------------压缩js文件

用gulp开发的一个小案例